javascript - 延迟显示数组元素

Question

我有一个数组s=[John;亚历克斯； Mark]，我想一个一个的显示这个数组的元素，延迟3秒。

for (var i=0; i<=3; i++)
  {
     setTimeout(function(){x.innerHTML=s[i]},3000)
  }

看似很简单的问题，却想不通。

Answer 1

1. 你的循环运行了四次，而不是三次
2. setTimeout 以小写开头 s
3. 你的延迟应该是 3000 3 秒，而不是 2000
4. 你的延迟应该是 3000 * i，而不是 3000 否则它们会同时触发
5. 您不能在没有特殊预防措施的情况下在异步回调中使用循环变量 - 回调都将看到分配给 i 的最后一个值，而不是您通过循环时它所拥有的值。

这行得通，并且完全避免了循环变量问题:

var s = ['John', 'Mark', 'Alex'];
var i = 0;

(function loop() {
    x.innerHTML = s[i];
    if (++i < s.length) {
        setTimeout(loop, 3000);  // call myself in 3 seconds time if required
    }
})();      // above function expression is called immediately to start it off

注意它是如何使用“伪递归”在上一次迭代完成后 3000 毫秒触发下一次迭代的。这比让 n 个未完成的计时器同时等待要好。

参见 http://jsfiddle.net/alnitak/mHQVz/