將循環與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小提琴