L’utilisation de JavaScript Settimeout est très fréquente dans la programmation quotidienne avec JavaScript. Cependant, plusieurs fois, il n’est pas bien compris car cela fonctionne. Nous expliquerons à la fois le concept de Settimeout JavaScript et le seinterval qui est la méthode complémentaire et de voir son fonctionnement.
JavaScript Settimeout et Curiosités
La fonction JavaScript Setimeout est responsable de l’exécution d’une autre fonction au bout d’un certain temps. Ils sont généralement utilisés pour gérer des animations, des transitions et des opérations similaires. Nous allons construire l’exemple de « Hello World ».
function mensaje() { console.log("hola desde javascript");}setTimeout(mensaje,5000);
Ce message passera au cours des 5 secondes de la console:
À ce moment-là, tout semble très simple, nous retardons simplement l’exécution 5 secondes. La réalité est un peu plus complexe. Imaginez ajoutons le code suivant. à notre page:
<html><head> <script type="text/javascript"> function mensaje() { console.log("hola desde javascript"); } setTimeout(mensaje,5000); function congelar () { var tiempo = new Date(); console.dir(tiempo); tiempo.setSeconds(tiempo.getSeconds() + 10); while (new Date().getTime() < tiempo.getTime()) { } console.log("pulsaste"); } </script></head><body><input type="button" value="congelar" onclick="congelar()" /></body></html>
Nous venons d’ajouter un bouton qui appuyait sur l’exécution de la fonction gèle. Cette fonction exécute une boucle infinie pendant 10 secondes.
Le résultat est que lors de l’exécution de notre programme, le Settimeout n’est pas imprimé à 5 secondes, mais il est imprimé à 10. Qu’est-ce que arrivé ?. Nous devons nous rappeler que JavaScript n’a qu’un fil d’exécution. Ce fil est responsable de l’exécution d’une file d’attente d’événements enregistrés.
Dans notre cas, nous avons deux événements que l’on est le clic et un autre est le Settimeout qui est exécuté à 5 secondes. Par conséquent, notre queue a deux événements que le fil JavaScript doit exécuter. Si nous appuyons sur le bouton juste sur le chargement de la page, le premier événement que nous allons exécuter sera click. Le problème est qu’il génère une boucle infinie et conservera un filetage JavaScript pendant 10 secondes.
Beaucoup que nous avons défini le SettimeOut à 5 secondes, il ne peut jamais être exécuté tant que le thread n’est jamais libéré de 10 secondes.
Nous prenons toujours en compte la façon dont JavaScript fonctionne en lançant des opérations de ce type.
JavaScript Settimeout VS seinterval
La fonction SETITINerval est complémentaire à la sécurité et ce qu’elle nous permet de exécuter une certaine fonctionnalité tous les x temps. La particularité est que l’intervalle doit avoir une condition finale. Voyons-le:
<html><head> <script type="text/javascript"> var tope=0; var intervalo; function mensaje() { console.log("hola desde javascript"); tope++; if (tope>=10) { clearInterval(intervalo); } } function intervalo() { intervalo=setInterval(mensaje,1000); } </script></head><body><input type="button" value="intervalo" onclick="intervalo()" /></body></html>
Ceci imprimera chaque seconde « Hello de JavaScript » sur la console jusqu’à ce que nous décidions de mettre fin à l’intervalle à l’aide de la méthode ClearInterval et de nous soutenir. Dans l’arrêt de variable.
Nous venons de voir les différences fondamentales entre JavaScript Settimeout VS Seinterval.
Autres articles connexes: