将循环与javascript中的计时事件组合在一起

Question

我有这个代码：

    for (i = 0; i < 3; i++) {
      var interval = setInterval(function(){
        alert(i);
      }, 2000);
    }

我想要实现的是每2秒发出一次警报，显示前0，然后是1，最后是2。

相反，我必须等待很长时间才有3个警报都显示数字3.我的代码在哪里错了？

Answer 1

1.1没有for loop +没有初始延迟（ 演示 ）：

var i = 0;
var showAlert = function(){
    alert(i);
    i++;
    if(i < 3){
        setTimeout(function(){
            showAlert();
        }, 2000);
    }
};
showAlert();

1.2没有for loop + with initial delay（ demo ）：

var i = 0;
var showAlert = function(){
    if(i < 3){
        setTimeout(function(){
            alert(i);
            i++;
            showAlert();
        }, 2000);
    }
};
showAlert();

2.1使用for loop +没有初始延迟（ 演示 ）：

function setAlert(k){
    setTimeout(function(){
        alert(k);
    },k * 2000);
}
for(var i = 0; i < 3; i++) {
    setAlert(i);
}

2.2使用for loop + with initial delay（ demo ）：

function setAlert(k){
    setTimeout(function(){
        alert(k);
    },(k + 1) * 2000);
}
for(var i = 0; i < 3; i++) {
    setAlert(i);
}

Answer 2

没有forloop：

var number = 0;
var interval = setInterval(function(){
    alert(number);
    number++;
    if(number === 3) {
        clearInterval(interval);
    }
}, 2000);

的jsfiddle

Answer 3

那么，这个问题还有（不止一个）解决方案。 但是，让我们先说说为什么你的代码不能正常工作。

你的代码：

for (i = 0; i < 3; i++) {
    var interval = setInterval(function(){
        alert(i);
    }, 2000);
}

..基本上意味着它会在2秒后分配三个setInterval调用，就像for循环将它们放入队列一样快。 所以基本上，所有的呼叫在2秒后运行得非常快，它们之间只有几毫秒或更短的时间。 而且， setInterval意味着只要对分配给它的变量调用clearInterval就会调用它。 换句话说，您的代码永远不会停止执行警报，因为您永远不会调用clearInterval 。 最后，您的alert(i)将始终显示值3，因为它是执行离开for循环时i的最后一个值。

为了改进你的代码，你可以完全删除for循环，只要i的值被警告三次就让setInterval运行; 此时，您只需将clearInterval调用为具有setInterval句柄的值，并且作业已完成。

工作代码：

// value to output
var i = 0,
    // starting setInterval and assigning its handle to variable interval,
    // it is used to clear the interval when execution should be finished
    interval = setInterval(function () {

        // alert value of i and increase it by 1
        alert(i++);

        // if i is equals to 3, no more calls
        if(i === 3) {

            // clear the interval so method won't be called in the future
            clearInterval(interval);

        }
    }, 2000);

JS FIDDLE示例

干杯，希望你今天学到了新东西。

Answer 4

1. 首先，我会选择setTimout，你知道你需要3个警报。

2. 第二个问题有点陌生。 您正在调用async函数，setTimeout / setInterval并引用setTimeout回调中for循环的原始i。 这是行不通的，因为在超时调用时，for循环已经完成，i var将是3.一个解决方案是在自调用匿名函数中使用异步函数中需要的参数来包装异步函数。 在我们的例子中，我们称之为i。

解：

for (i = 0; i < 3; i++) {
    (function(i) {
        setTimeout(function(){
            alert(i);
        }, 2000 * i);
    })(i);
}

JS小提琴