Une brève discussion sur les threads Javascript et les mécanismes de synchronisation_compétences Javascript-js tutoriel-php.cn

Une brève discussion sur les threads Javascript et les mécanismes de synchronisation_compétences Javascript

WBOY

Libérer： 2016-05-16 15:51:57

original

893 Les gens l'ont consulté

Utilisation de setTimeout et setInterval

Les seconds paramètres de setTimeout et setInterval définis dans le document de l'API Javascript signifient respectivement le nombre de millisecondes après lequel la fonction de rappel est exécutée et le nombre de millisecondes après lequel la fonction de rappel est exécutée. Mais avec l’accumulation d’expériences professionnelles, nous avons constaté que ce n’est pas le cas.

Par exemple

div.onclick=function(){
  setTimeout(function(){
     document.getElementById('input').focus(); 
  },0);
}

Copier après la connexion

Je ne peux pas l'expliquer. Exécutez-le immédiatement. Pourquoi avez-vous besoin de régler une minuterie pour tourner en rond ?

Un autre jour, vous avez écrit le morceau de code suivant

setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);

Copier après la connexion

La première ligne de code boucle sans fin, ce qui fait que la deuxième ligne d'alerte n'apparaît jamais. Pourquoi ?

Mono-thread ou multi-thread ?
Il s'avère que le moteur JavaScript s'exécute dans un seul thread et que le navigateur n'a qu'un seul thread exécutant le programme JavaScript. Grâce à la conception monothread, les problèmes complexes de synchronisation multithread sont éliminés.

Lors du réglage d'une minuterie, le navigateur insérera la fonction de rappel que vous spécifiez dans la séquence de tâches après l'heure définie au lieu de l'exécuter immédiatement. Si le temps de timing est défini sur 0, cela signifie que la séquence de tâches est insérée immédiatement au lieu d'être exécutée immédiatement. Vous devez toujours attendre que les tâches dans la file d'attente soient exécutées et c'est votre tour avant de les exécuter.

Le code suivant apparaît donc 2 d'abord, puis 1

setTimeout(function(){
  alert(1);
},0);
alert(2);

Copier après la connexion

Alors, quelle est l’utilité pratique de cela ? Jetons un coup d'œil à l'exemple ci-dessous

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>setTimeout 0</title>
  </head>
  <body>
    输入字符，但内容却不能实时显示<input type="text" onkeydown="show(this.value)"/> <br/>
    输入字符，内容能实时显示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/>
    <div></div>
    <script>
      function show(val){
        document.getElementsByTagName("div")[0].innerHTML=val;
      }
    </script>
  </body>
</html>

Copier après la connexion

Dans cet exemple, le moteur js doit exécuter le gestionnaire d'événements keydown, puis mettre à jour la valeur de la zone de saisie. Lorsque le gestionnaire d'événements est exécuté, la tâche de mise à jour de la valeur ne peut entrer dans la file d'attente que pour attendre, donc la valeur mise à jour ne peut pas être obtenue lorsque l'événement keydown est exécuté, mais via setTimeout, nous mettons l'opération d'obtention de la valeur dans la file d'attente et ; exécutez-le après avoir mis à jour la valeur, ainsi Le contenu sera affiché en temps réel.

Revenez regarder le code suivant :

setTimeout(function(){
  //do something...
   setTimeout(arguments.callee,10);
},10);

setInterval(function(){
  //do something...
},10);

Copier après la connexion

Ces deux morceaux de code semblent avoir le même effet, n'est-ce pas ? En fait, il y a une différence. Le setTimeout dans la fonction de rappel du premier paragraphe est un nouveau timing défini après l'exécution du moteur js. On suppose qu'il y a un intervalle de temps entre la fin du rappel précédent et le début de. le prochain rappel Théoriquement, l'intervalle de temps > ;=10 ms, le code suivant <=10 ms.

En parlant de ça, XMLHttpRequest est-il vraiment asynchrone ? Oui, la requête est asynchrone, mais cette requête est un nouveau thread ouvert par le navigateur. Lorsque l'état demandé change, si un rappel a été défini précédemment, le thread asynchrone placera l'événement de changement d'état dans la file d'attente de traitement du moteur js pour attendre le traitement. Lorsque la tâche est traitée, le moteur js exécutera toujours la fonction définie par. onreadystatechange dans un seul thread.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Une brève discussion sur les threads Javascript et les mécanismes de synchronisation_compétences Javascript