How do I make the following simple while loop execute sequentially?
var x = 2;
var y = 10;
while (x<y) {
x = x+2;
setTimeout(function(){ y = y+1;
}, 500);
}
2 Answers
Use setInterval() instead.
setTimeoutexecutes the function once on a time out.setIntervalexecutes the function repeatedly on and interval
To stop the interval, use clearInterval()
Example:
var x = 2,
y = 10;
var loop = setInterval(function(){
if(x<y) {
x = x+2;
y++;
} else {
clearInterval(loop);
}
}, 500);
6 Comments
Makudex
Could you please explain what's the difference between setInterval and setTimeout?
tom.denka
so when the condition of x<y is false, will the loop automatically break?
R3tep
@Makudex I added the difference.
R3tep
@tom.denka I updated my code to stop the loop with clearInterval.
R3tep
@nuttyaboutnatty The question code does not work because all setTimeouts are started at the same time. The while loop does not wait until the first setTiemeout is executed before starting the second iteration. It loops on all iterations and starts the setTimeout after.
|
If what you expect is do x = x + 2; y = y + 1; in each iteration until x >= y then you can do like:
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();The difference betweeen setTimeout and setInterval is:
You need to call setTimeout in your callback to keep it loop until it mets the stop condition. While setInterval just need to call once, you may have to use clearInterval to stop it to keep calling the callback.
x = x + 2andy = y + 1? Or you want to first addxto10then doy = y + 1with same counts ofx = x + 2?