Explication détaillée de l'utilisation d'EventLoop dans JS

Cette fois, je vais vous apporter une explication détaillée de l'utilisation d'EventLoop en JS Quelles sont les précautions lors de l'utilisation d'EventLoop en JS Voici des cas pratiques, jetons un coup d'oeil.

Imaginez, par exemple, que le navigateur exécute un algorithme de conversion d'image complexe. Parce qu'il est monothread, le processus du navigateur est bloqué à ce moment et ne peut pas restituer l'interface ou exécuter d'autres codes. l’interface perdra l’interaction avec l’utilisateur.

Ce n'est généralement pas un gros problème, mais lorsque le navigateur exécute plusieurs algorithmes similaires en même temps, ce problème devient grave.

La plupart des développeurs js ayant une certaine expérience comprennent l'exécution asynchrone du code, en particulier l'utilisation d'ajax.

// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('https://example.com/api');
console.log(response);
// `response` won't have the response

Cette réponse n’obtiendra pas le résultat souhaité.

Au lieu de cela, vous devez obtenir le résultat via la fonction de rappel comme la méthode face-à-face

ajax('https://example.com/api', function(response) {
  console.log(response); // `response` is now available
});

Aussi, rappel ici, le code suivant, async: false n'est jamais une bonne idée.

// This is assuming that you're using jQuery
jQuery.ajax({
  url: 'https://api.example.com/endpoint',
  success: function(response) {
    // This is your callback.
  },
  async: false // And this is a terrible idea
});

Grâce à l'exemple ci-dessus, nous devons comprendre que les fonctions asynchrones peuvent nous aider à résoudre des problèmes similaires au blocage du navigateur.

Bien entendu, vous pouvez également implémenter la même logique via setTimeout(callback, milliseconds). Si vous comprenez l'asynchrone, que sera le résultat lorsque le code suivant sera exécuté ?

function first() {
  console.log('first');
}
function second() {
  console.log('second');
}
function third() {
  console.log('third');
}
first();
setTimeout(second, 1000); // Invoke `second` after 1000ms
third();

Quel est désormais le principe du mécanisme de traitement asynchrone ? Ici, nous présenterons notre boucle d'événement Event Loop

Event Loop a un travail (tâche) simple : surveille la pile d'appels et la file d'attente de rappel. Si la pile d'appels est vide, elle prendra le premier événement de la file d'attente et le poussera sur la pile d'appels, l'exécutant ainsi efficacement.

Cette itération est appelée un Tick dans la boucle d'événements. Chaque événement n'est qu'un rappel de fonction.

console.log('Hi');
setTimeout(function cb1() { 
  console.log('cb1');
}, 5000);
console.log('Bye');

Exécutez ce code

Notez que setTimeout(...) ne place pas automatiquement votre rappel dans la file d'attente des boucles d'événements.

Il règle une minuterie. Lorsque le délai expire, le navigateur place votre rappel dans la boucle d'événements afin qu'un futur tick s'exécute. Cependant, d'autres événements peuvent avoir été ajoutés à la file d'attente - votre rappel ne s'exécutera pas immédiatement.

Il existe de nombreux articles et tutoriels pour démarrer avec le code asynchrone en JavaScript et il est recommandé d'utiliser setTimeout(callback, 0).
Vous savez maintenant comment se fait Event Loop et comment fonctionne setTimeout.

Vous pouvez mieux comprendre le code suivant

console.log('Hi');
setTimeout(function() {
  console.log('callback');
}, 0);
console.log('Bye');

Bien que le temps d'attente soit fixé à 0 ms, le résultat dans la console du navigateur ressemble à ceci :

Salut

Au revoir

rappel

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation du slot et du slot-scope dans vue

Suppression de la superposition de marqueurs sur la méthode de la carte Baidu

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!