显示延迟的数组元素

Question

我有一个数组s=[John; Alex; Mark],我想逐个延迟地显示这个数组的元素.

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

注意它如何使用"伪递归"在上一次迭代完成后触发3000ms的下一次迭代.这对于让n优秀的计时器同时等待是最好的.

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