javascript - 在阵列上连续循环方面遇到问题

您能否看一下这个演示，让我知道为什么循环在第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>

最佳答案

尝试如下重写逻辑，

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

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

DEMO