Question

请你看看这个演示，让我知道为什么循环在第3个元素上停止而不是再次取回第一个项目？

var appTxt = $('.smart-txt').hide(),
    news = ['News 1', 'News 2', 'News3'],
    count = 0;

function changeNews() {
    appTxt.fadeIn(2000).delay(3000).fadeOut(2000, function() {
        changeNews();
    }).text(news[count++]);
}
changeNews();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="smart-txt"> </h1>

Answer 1

尝试重写您的逻辑，如下所示，

function changeNews() {
    appTxt.fadeIn(2000).delay(3000).fadeOut(2000, function() {
        changeNews();
    }).text(news[count++ % news.length]);
}

当count变得大于array长度的长度时，它将返回undefined。因此.text(undefined)将充当getter而不是setter。这就是为什么你一次又一次地看到最终文本的原因。

DEMO

Answer 2

更改

if(count == news.length ){
  count = 0;
}

添加上述条件只是为了初始化count变量，如果它到达最后一个元素。

工作演示

var appTxt = $('.smart-txt').hide(),
    news = ['News 1', 'News 2', 'News3'],
    count = 0;

function changeNews() {
    appTxt.fadeIn(2000).delay(3000).fadeOut(2000, function() {
        changeNews();
    }).text(news[count++]);
    if(count == news.length ){
      count=0
    }
}
changeNews();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="smart-txt"> </h1>

在阵列上进行连续循环问题

2 个答案:

DEMO