如何在JavaScript循环中实现延迟执行?
P粉680000555
P粉680000555 2023-08-20 14:12:51
0
2
404

我想在一个while循环中添加延迟/睡眠:

我尝试了以下的方法:

alert('hi'); for(var start = 1; start < 10; start++) { setTimeout(function () { alert('hello'); }, 3000); }

只有第一种情况是正确的:在显示alert('hi')后,它将等待3秒钟,然后显示alert('hello'),但接下来alert('hello')将会不断地重复显示。

我希望的是,在显示alert('hello')后的3秒钟后,它需要再等待3秒钟才能再次显示alert('hello'),以此类推。

P粉680000555
P粉680000555

全部回复 (2)
P粉718165540

自从ES7以后,有一种更好的方法可以等待循环:

// 返回一个在“ms”毫秒后解析的Promise const timer = ms => new Promise(res => setTimeout(res, ms)) async function load () { // 我们需要将循环包装在一个异步函数中才能使其工作 for (var i = 0; i < 3; i++) { console.log(i); await timer(3000); // 然后可以等待创建的Promise } } load();

当引擎到达await部分时,它设置一个超时并暂停执行async函数。然后,当超时完成时,执行在该点继续。这非常有用,因为您可以延迟(1)嵌套循环,(2)有条件的,(3)嵌套函数:

async function task(i) { // 3 await timer(1000); console.log(`Task ${i} done!`); } async function main() { for(let i = 0; i < 100; i+= 10) { for(let j = 0; j < 10; j++) { // 1 if(j % 2) { // 2 await task(i + j); } } } } main(); function timer(ms) { return new Promise(res => setTimeout(res, ms)); }

MDN上的参考资料

尽管ES7现在已经被NodeJS和现代浏览器支持,但您可能希望使用使用BabelJS进行转译,以便在任何地方运行。

    P粉659518294

    setTimeout()函数是非阻塞的,并且会立即返回。因此,您的循环会非常快地迭代,并且会在快速连续的情况下触发3秒的超时。这就是为什么您的第一个警报在3秒后弹出,而其他所有警报都会连续跟随而没有任何延迟。

    您可能想使用类似以下的代码:

    var i = 1; // 将计数器设置为1 function myLoop() { // 创建一个循环函数 setTimeout(function() { // 当调用循环时,调用一个3秒的setTimeout console.log('hello'); // 在这里写入您的代码 i++; // 增加计数器 if (i < 10) { // 如果计数器小于10,则调用循环函数 myLoop(); // .. 再次触发另一个setTimeout() } // .. }, 3000) } myLoop(); // 启动循环
      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责声明 Sitemap
      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!