Javascript 间隔缺少第一项

我已经写了一些js来显示在

#changingword

循环中的几个不同的单词。然而，当它第一次加载时，它跳过了第二个单词，因此它从“设计”直接转到了“电子商务解决方案”，而没有显示“开发”。第一次循环后，它工作正常。我的代码如下

html：

 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <h1>Creative Development</h1>
    <h2 id="changingword">Design</h2>
  </div>

创造性发展
设计

JS：

<script>
(function(){
    var words = [
        'Development',
        'E-commerce Solutions',
        'Optimisation',
        'Support',
        'Design'
        ], i = 0;
    setInterval(function(){
        $('#changingword').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn("slow");
        });
    }, 1500);

})();
</script>

（功能（）{
变量字=[
"发展",，
“电子商务解决方案”，
“优化”，
"支持",，
“设计”
]，i=0；
setInterval（函数（）{
$（'#changingword'）.fadeOut（函数（）{
$（this.html（words[i=（i+1）%words.length]）.fadeIn（“慢”）；
});
}, 1500);
})();

---

你知道为什么会这样吗？

问题出在这里：

$('#changingword').fadeOut(function(){
    $(this).html(words[i=(i+1)%words.length]).fadeIn("slow");
});

您正在更新

i

，然后在计算中使用结果值

使用后更新

i

：

$('#changingword').fadeOut(function(){
    $(this).html(words[i%words.length]).fadeIn("slow");
    i++;
});

---

我认为问题在于，在第一次遍历时，单词[I=（I+1）%words.length]将等同于单词[1]，而不是单词[0]

您可以通过执行以下操作来递增，但返回预先递增的值

$('#changingword').fadeOut(function(){
            $(this).html(words[i++%words.length]).fadeIn("slow");
        });

---

在同一行中执行增量和使用结果可能很棘手，您需要确定表达式的计算方式

更改：

words[i=(i+1)%words.length]

致：

并设置

i=-1开始

现在，
（++i）
确保i在表达式的其余部分之前立即递增1，这就是为什么我们需要从-1开始。从那里一切都好

如果您想用增量保留表达式，而不是将增量分解到另一行，那么这是一种替代已发布答案的方法

++i
和
i++
的一般差异在许多语言中是相同的，因此值得研究：


用
i++
替换你的
i=（i+1）
。不要用i++替换（i+1），使用++i，你必须调整初始化i。查看我的帖子了解更多信息如何正确使用它以及前缀和后缀之间的区别。
words[i=(++i)%words.length]