如何在JavaScript中使while循环中的setTimeout按顺序执行？

Question

我该如何使下面这个简单的while循环按顺序执行？

var x = 2;
var y = 10;
while (x<y) {
  x = x+2;
  setTimeout(function(){ y = y+1;
  }, 500);
}

- tom.denka

---

你希望每次迭代中都执行 x = x + 2 和 y = y + 1 吗？或者你想先将 x 加到 10，然后再以相同的次数执行 y = y + 1 和 x = x + 2？ - fuyushimoya

Answer 1

请使用setInterval()代替。

setTimeout在设置的时间内仅执行一次函数。setInterval会定期重复执行函数。

转自

要停止定时器，请使用clearInterval()。

例如：

var x = 2,
    y = 10;
var loop = setInterval(function(){ 
    if(x<y) {
        x = x+2;
        y++;
    } else {
        clearInterval(loop);
    }
}, 500);

- R3tep

---

请问您能否解释一下setInterval和setTimeout之间的区别？ - Makudex

当 x<y 的条件为假时，循环会自动中断吗？ - tom.denka

@Makudex 我加上了差异。 - R3tep

@tom.denka 我更新了我的代码，使用 clearInterval 停止循环。 - R3tep

@R3tep 为什么这个问题的代码（可能）不起作用？也许与这个有关？ - nutty about natty

@nuttyaboutnatty 这段代码无法正常工作，因为所有的setTimeout都是同时启动的。while循环在开始第二次迭代之前不会等待第一个setTiemeout执行完毕。它会在所有迭代上循环并在之后启动setTimeout。 - R3tep

Answer 2

如果你期望的是在每次迭代中执行 x = x + 2; y = y + 1; 直到 x >= y，那么你可以这样做：

var x = 2;
var y = 10;
var func = function() {
  // While x is still smaller than y
  if (x < y) {
    x = x + 2;
    y = y + 1;
    console.log(x, y);
 
    // Register a timer to call self after 500ms if we still to loop.
    setTimeout(func, 500);
  }
};

// Manually start the function.
func();

setTimeout和setInterval的区别是：

你需要在回调函数中调用setTimeout来使它循环执行，直到满足停止条件。而setInterval只需要调用一次，你可能需要使用clearInterval来停止它不断调用callback。

- fuyushimoya