Implémentation de sleep ou wait à l'aide de JavaScript

JavaScript n'a pas de fonction sleep(), ce qui oblige le code à attendre une période de temps spécifiée avant de reprendre l'exécution. Que dois-je faire si j'ai besoin que JavaScript attende ?

Supposons que vous souhaitiez enregistrer trois messages sur la console Javascript, avec un délai d'une seconde entre chaque message. Il n'y a pas de méthode sleep() en JavaScript, vous pouvez donc essayer la meilleure solution en utilisant setTimeout().

Malheureusement, setTimeout() ne fonctionne pas aussi bien que prévu, selon la façon dont vous l'utilisez. Vous avez probablement essayé cela à un moment donné dans votre boucle JavaScript et avez constaté que setTimeout() ne semble pas fonctionner du tout. Le problème

découle d'une mauvaise compréhension setTimeout() en tant que fonction sleep(), alors qu'en fait elle fonctionne selon son propre ensemble de règles.

Dans cet article, j'expliquerai comment utiliser setTimeout(), y compris comment l'utiliser pour créer une fonction de veille qui amène JavaScript à suspendre l'exécution et à attendre entre des lignes de code consécutives.

En regardant la documentation de setTimeout(), il semble nécessiter un paramètre "délai", mesuré en millisecondes.

Retour à la question d'origine, vous essayez d'appeler setTimeout(1000) et attendez 1 seconde entre les appels à la fonction console.log().

Malheureusement, setTimeout() ne fonctionne pas comme ça :

setTimeout(1000)
console.log(1)
setTimeout(1000)
console.log(2)
setTimeout(1000)
console.log(3)

for (let i = 0; i <= 3; i++) {
  setTimeout(1000)
  console.log(`#${i}`)
}

Le résultat de ce code est totalement sans délai, comme si setTimeout() n'existait pas.

En regardant la documentation, vous verrez que le problème est qu'en réalité le premier paramètre doit être un appel de fonction, pas un délai. Après tout, setTimeout() n'est pas réellement une méthode sleep().

Vous réécrivez le code pour prendre la fonction de rappel comme premier paramètre et le délai requis comme deuxième paramètre :

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 1000)
setTimeout(() => console.log(3), 1000)

for (let i = 0; i <= 3; i++) {
  setTimeout(() => console.log(`#${i}`), 1000)
}

De cette façon, les trois messages du journal console.log sont dans Après un Avec un seul délai de 1 000 ms (1 seconde), ils sont affichés ensemble, plutôt que l'effet idéal d'un délai d'une seconde entre chaque appel répété.

Avant de discuter de la façon de résoudre ce problème, examinons la fonction setTimeout() plus en détail.

Vérifiez setTimeout ()

Vous avez peut-être remarqué l'utilisation de fonctions fléchées dans le deuxième extrait de code ci-dessus. Celles-ci sont obligatoires car vous devez transmettre une fonction de rappel anonyme à setTimeout() qui exécutera le code à exécuter après un délai d'attente.

Dans une fonction anonyme, vous pouvez spécifier du code arbitraire à exécuter après le délai d'attente :

// 使用箭头语法的匿名回调函数。
setTimeout(() => console.log("你好!"), 1000)
// 这等同于使用function关键字
setTimeout(function() { console.log("你好!") }, 1000)

Théoriquement, vous pouvez simplement passer la fonction comme premier argument et les arguments de la fonction de rappel comme reste paramètres, mais cela n'a jamais semblé fonctionner correctement pour moi :

// 应该能用，但不能用
setTimeout(console.log, 1000, "你好")

Les gens ont résolu ce problème en utilisant des chaînes, mais ce n'est pas recommandé. L'exécution de JavaScript à partir d'une chaîne a des implications en matière de sécurité, car tout acteur malveillant peut exécuter du code arbitraire injecté sous forme de chaîne.

// 应该没用，但确实有用
setTimeout(`console.log("你好")`, 1000)

Alors pourquoi setTimeout() échoue-t-il dans notre première série d'exemples de code ? Il semble que nous l'utilisons correctement, le délai de 1000 ms se répète à chaque fois.

La raison est que setTimeout() s'exécute en tant que code synchrone et que plusieurs appels à setTimeout() s'exécutent tous simultanément. Chaque appel à setTimeout() crée du code asynchrone qui sera exécuté plus tard après un délai donné. Étant donné que chaque délai dans l'extrait est le même (1 000 ms), tout le code en file d'attente s'exécutera simultanément après un seul délai de 1 seconde.

Comme mentionné précédemment, setTimeout() n'est pas réellement une fonction sleep(), mais met simplement en file d'attente le code asynchrone pour une exécution ultérieure. Heureusement, vous pouvez utiliser setTimeout() pour créer votre propre fonction sleep() en JavaScript.

Comment écrire une fonction de veille

Avec Promises, la puissance de async et await vous pouvez écrire une fonction sleep() qui se comportera comme prévu.

Cependant, vous ne pouvez appeler cette fonction async personnalisée qu'à partir d'une fonction sleep(), et vous devez l'utiliser avec le mot-clé await.

Ce code montre comment écrire une fonction sleep() :

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

const repeatedGreetings = async () => {
  await sleep(1000)
  console.log(1)
  await sleep(1000)
  console.log(2)
  await sleep(1000)
  console.log(3)
}
repeatedGreetings()

Cette fonction JavaScript sleep() fonctionne exactement comme prévu car await provoque l'exécution synchrone du code Pause jusqu'à ce que le La promesse est résolue.

Un choix simple

De plus, vous pouvez spécifier un délai d'attente augmenté lors du premier appel setTimeout().

Le code suivant est équivalent à l'exemple précédent :

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)

L'utilisation d'un délai d'attente augmenté est possible car le code est exécuté simultanément, donc la fonction de rappel spécifiée sera exécutée à 1, 2 du code synchrone et exécuter après 3 secondes.

Est-ce que ça fonctionnera en boucle ?

Comme vous vous en doutez, les deux options ci-dessus pour suspendre l'exécution de JavaScript fonctionnent correctement dans une boucle. Regardons deux exemples simples.

Ceci est un extrait de code utilisant une fonction sleep() personnalisée :

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function repeatGreetingsLoop() {
  for (let i = 0; i <= 5; i++) {
      await sleep(1000)
    console.log(`Hello #${i}`)
    }
}
repeatGreetingsLoop()

这是一个简单的使用增加超时的代码片段：

for (let i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

我更喜欢后一种语法，特别是在循环中使用。

总结

JavaScript可能没有 sleep() 或 wait() 函数，但是使用内置的 setTimeout() 函数很容易创建一个JavaScript，只要你谨慎使用它即可。

就其本身而言，setTimeout() 不能用作 sleep() 函数，但是你可以使用 async 和 await 创建自定义JavaScript sleep() 函数。

采用不同的方法，可以将交错的（增加的）超时传递给 setTimeout() 来模拟 sleep() 函数。之所以可行，是因为所有对setTimeout() 的调用都是同步执行的，就像JavaScript通常一样。

希望这可以帮助你在代码中引入一些延迟——仅使用原始JavaScript，而无需外部库或框架。

祝您编码愉快！ 

英文原文地址：https://medium.com/dev-genius/how-to-make-javascript-sleep-or-wait-d95d33c99909

作者：Dr. Derek Austin

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!