我想在while循环中添加一个delay/sleep:
我是这样试的:
alert('hi');
for(var start = 1; start < 10; start++) {
setTimeout(function () {
alert('hello');
}, 3000);
}
只有第一种情况是正确的:在显示alert('hi')后，它将等待3秒，然后alert('hello')将显示，但随后alert('hello')将不断重复。
我想要的是，在警报('hello')显示3秒后警报('hi')，然后它需要等待3秒的第二次警报('hello')，以此类推。
当前回答
在ES6中，你可以这样做:
对于(设I = 0;I <= 10;我+ +){ setTimeout(函数(){ console.log(我); },我* 3000) }
在ES5中，你可以这样做:
For (var I = 0;I <= 10;我+ +){ (函数(i) { setTimeout(函数(){ console.log(我); },我* 3000) }) (); ｝
原因是，let允许您声明限制在块语句或使用它的表达式范围内的变量，而不像var关键字那样全局定义变量，或局部定义整个函数，而不考虑块范围。
其他回答
我只是想在这里发表我的意见。此函数运行具有延迟的迭代循环。请看这个jsfiddle。函数如下:
function timeout(range, time, callback){
var i = range[0];
callback(i);
Loop();
function Loop(){
setTimeout(function(){
i++;
if (i<range[1]){
callback(i);
Loop();
}
}, time*1000)
}
}
例如:
//This function prints the loop number every second
timeout([0, 5], 1, function(i){
console.log(i);
});
相当于:
//This function prints the loop number instantly
for (var i = 0; i<5; i++){
console.log(i);
}
您可以创建一个承诺setTimeout的睡眠函数。这使您可以使用async/await来编写代码，而无需回调和熟悉的for循环控制流。
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); (async () => { 对于(设I = 0;I < 10;我+ +){ console.log(我); 等待睡眠(1000); ｝ console.log(“完成”); }) ();
在Node中，你可以使用计时器/承诺来避免承诺步骤(如果旧版本的Node不支持该功能，上面的代码也可以工作):
const {setTimeout: sleep} = require("timers/promises");
// same code as above
无论如何，由于JS是单线程的，超时是异步的是一件好事。如果不这样做，浏览器就没有机会重新绘制UI，从而导致用户的界面冻结。
另一种方法是将超时时间相乘，但请注意，这与睡眠不同。循环之后的代码将立即执行，只有回调函数的执行被延迟。
for (var start = 1; start < 10; start++)
setTimeout(function () { alert('hello'); }, 3000 * start);
第一个超时设置为3000 * 1，第二个超时设置为3000 * 2，依此类推。
如果使用ES6，你可以使用for循环来实现:
For(令I = 1;I < 10;我+ +){ setTimeout(函数定时器(){ console.log(“hello world”); }， I * 3000); ｝
它为每次迭代声明i，这意味着超时是+ 1000之前的超时。这样，传递给setTimeout的就是我们想要的。
试试这样做:
var i = 0, howManyTimes = 10; 函数f() { console.log(“嗨”); 我+ +; if (i < howManyTimes) { setTimeout (3000); ｝ ｝ f ();
