在 for 循环中使用 setTimeout 和整数

Question

我有一个 ID 为 play 的按钮。

我想用这段代码对那个按钮进行倒计时。但由于某种原因，我无法让它工作。

var timeoutTime = 500, seconds = 5;
var countdown = $("#play h4");
for(var i = seconds; i>0; i--)
{
    setTimeout(function() {
    countdown.text("" + i); },timeoutTime);
    timeoutTime += 1000;
}

我尝试了很多东西，我能得到的最好结果就是 1 而不是 5 4 3 2 1。使用这段代码，我在按钮上得到一个 0。

有什么问题？

Answer 1

使用这个：

for(var i = seconds; i>0; i--) {
    (function(i){
      setTimeout(function() {
          countdown.text("" + i); }, timeoutTime);
    })(i);
    timeoutTime += 1000;
}

您的问题是 i 发生了变化，而您总是使用 i 的最后一个值进行调用，因为您传递给 setTimeout 的回调是在循环结束后调用的。

经典的解决方案是使用闭包来保持另一个变量（这里同名 i）具有所需的值。它之所以有效，是因为对于每次迭代，这是一个不同的函数（变量的作用域是全局作用域或声明它的函数）。