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

【问题标题】：How to make setTimeout in while loop execute sequentially in JavaScript?如何使while循环中的setTimeout在JavaScript中按顺序执行？
【发布时间】：2015-09-15 08:27:26
【问题描述】：

如何使以下简单的while循环顺序执行？

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

【问题讨论】：

您期望在每次迭代中x = x + 2 和y = y + 1？或者您想先将x 添加到10，然后使用相同数量的x = x + 2 执行y = y + 1？

标签： javascript

【解决方案1】：

请改用setInterval()。

setTimeout 在超时时执行一次函数。 setInterval 重复执行函数on和interval

source

要停止间隔，请使用clearInterval()

例子：

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

【讨论】：

你能解释一下setInterval和setTimeout有什么区别吗？
那么当x
@Makudex 我添加了差异。
@tom.denka 我更新了我的代码以使用 clearInterval 停止循环。
@nuttyaboutnatty 问题代码不起作用，因为所有 setTimeouts 都是同时启动的。 while 循环不会等到第一个 setTiemeout 执行后才开始第二次迭代。它在所有迭代中循环并在之后启动 setTimeout。

【解决方案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。

【讨论】：