Comment implémenter une exécution différée dans une boucle JavaScript ?
P粉680000555
P粉680000555 2023-08-20 14:12:51
0
2
504
<p>Je souhaite ajouter un délai/veille dans une boucle <code>while</code> <p>J'ai essayé ce qui suit : </p> <pre class="brush:php;toolbar:false;">alert('salut'); pour(var start = 1; start < 10; start++) { setTimeout (fonction () { alert('bonjour'); }, 3000); }</pré> <p>Seul le premier cas est correct : après avoir affiché <code>alert('hi')</code>, il attendra 3 secondes puis affichera <code>alert('hello' )< /code>, mais ensuite <code>alert('hello')</code> </p> <p>Ce que je veux, c'est qu'après 3 secondes d'affichage de <code>alert('hello')</code>, il doive attendre encore 3 secondes avant d'afficher <code>alert(' hello')< ;/code>, et ainsi de suite. </p>
P粉680000555
P粉680000555

répondre à tous(2)
P粉718165540

Depuis ES7, il existe une meilleure façon de attendreboucler :

// 返回一个在“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();

Lorsque le moteur atteint la section attendre, il définit un délai d'attente et await部分时,它设置一个超时并暂停执行async函数interrompt l'exécution de la fonction asynchrone. Ensuite, une fois le délai écoulé, l'exécution continue à ce stade. C'est très utile car vous pouvez différer (1) les boucles imbriquées, (2) les conditions, (3) les fonctions imbriquées :

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)); }

Références sur MDN

Bien qu'ES7 soit désormais pris en charge par NodeJS et les navigateurs modernes, vous souhaiterez peut-être utiliser Transpiling with BabelJS pour l'exécuter partout.

P粉659518294

setTimeout() La fonction est non bloquante et revient immédiatement. Ainsi, votre boucle itère très rapidement et déclenche le délai d'attente de 3 secondes en succession rapide. C'est pourquoi votre première alerte apparaît après 3 secondes et toutes les autres alertes suivent en continu sans aucun délai.

Vous souhaiterez peut-être utiliser un code similaire à :

var i = 1;                  //  将计数器设置为1

function myLoop() {         //  创建一个循环函数
  setTimeout(function() {   //  当调用循环时,调用一个3秒的setTimeout
    console.log('hello');   //  在这里写入您的代码
    i++;                    //  增加计数器
    if (i < 10) {           //  如果计数器小于10,则调用循环函数
      myLoop();             //  ..  再次触发另一个setTimeout()
    }                       //  ..  
  }, 3000)
}

myLoop();                   //  启动循环
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal