我想在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'),以此类推。
除了10年前接受的答案之外,使用更现代的Javascript,可以使用async/await/Promise()或生成器函数来实现正确的行为。(其他答案中建议的错误行为是设置一系列3秒警报,而不管“接受”警报()-或完成手头的任务)
使用异步/等待/承诺():
alert('嗨');
(async () => {
For (let start = 1;起始值< 10;开始+ +){
等待新的承诺(resolve => setTimeout(() => {
alert('你好');
解决();
}, 3000));
}
}) ();
使用生成器函数:
警报(“嗨”);
让函子;
(func = (function*() {
for(let start = 1, start < 10, start++) {
yield setTimeout(() => {
警报(“你好”);
func.next();
}, 3000);
}
})()).next();
据我所知,setTimeout函数是异步调用的。你能做的是将整个循环包装在一个异步函数中,并等待一个包含setTimeout的Promise,如下所示:
var looper = async function () {
for (var start = 1; start < 10; start++) {
await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("iteration: " + start.toString());
resolve(true);
}, 1000);
});
}
return true;
}
然后像这样调用运行它:
looper().then(function(){
console.log("DONE!")
});
请花些时间好好理解异步编程。
您可以创建一个承诺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,从而导致用户的界面冻结。