JQuery 的淡入淡出重复调用函数

Question

我有一组单词，我想连续淡出和淡入。我对 JS 很陌生，我无法弄清楚。

我的代码如下：

animate_loop = function(){
        var showText = ["Security","Mobile/Wireless","Cloud/Database","PC/Storage"]
        $.each(showText, function(i, val) {
        setTimeout(function() {
            $('#animate').fadeOut("slow", function() {
                $(this).text(val).fadeIn("slow");
            });
        }, i * 3000);
        });

setInterval(function(){animate_loop();},5000)

使用这段代码，函数在数组showText 中循环的速度非常快，我想知道是否还有其他没有setInterval 的方法来实现这一点。可能只是无限地调用animate_loop 函数，我认为这是不可取的。所以欢迎任何建议。

Answer 1

没有 setInterval 的其他方法

是的，我在这里所做的是使用回调来保持恒定链运行。 基本上是fadeIn/fadeOut，在fadeOut上重新运行。

$(function () {

  var showText = ["Security","Mobile/Wireless",
  "Cloud/Database","PC/Storage"];

  var 
    showNum = 0,
    $showText = $('.showtext');

  function doShow() {
    $showText.text(showText[showNum]);
    $showText.fadeIn('slow', function () {
      $showText.fadeOut('slow', function () {
        //lets make it so it wraps back to the start
        showNum = (showNum + 1) % showText.length; 
        doShow();
      });
    });
    
  }
  
  doShow();
});

.showtext {
  font-size: 24pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="showtext">
</div>