Wie implementiert man eine verzögerte Ausführung in einer JavaScript-Schleife?
P粉680000555
P粉680000555 2023-08-20 14:12:51
0
2
488
<p>Ich möchte eine Verzögerung/einen Ruhezustand in einer <code>while</code>-Schleife hinzufügen: </p> <p>Ich habe Folgendes versucht: </p> <pre class="brush:php;toolbar:false;">alert('hi'); for(var start = 1; start < 10; start++) { setTimeout(function () { alarm('hallo'); }, 3000); }</pre> <p>Nur der erste Fall ist korrekt: Nach der Anzeige von <code>alert('hi')</code> wird 3 Sekunden gewartet und dann <code>alert('hello')< angezeigt. /code>, aber dann wird <code>alert('hello')</code> wiederholt angezeigt. </p> <p>Was ich möchte ist, dass nach 3 Sekunden der Anzeige von <code>alert('hello')</code> weitere 3 Sekunden gewartet werden muss, bevor <code>alert('hello')< angezeigt wird ;/code> usw. </p>
P粉680000555
P粉680000555

Antworte allen(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();                   //  启动循环
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage