JavaScript implémente le blocage

Avant-propos

JavaScript est un langage de script de haut niveau largement utilisé dans le développement Web et le développement front-end. Dans la plupart des cas, JavaScript est un langage asynchrone qui suit le modèle de programmation événementielle, dans lequel les fonctions sont exécutées lorsqu'un événement est déclenché. Cela rend JavaScript idéal pour gérer les tâches liées aux opérations utilisateur de l'interface utilisateur, telles que la manipulation DOM et les requêtes AJAX.

Cependant, nous devons parfois bloquer l'exécution de JavaScript pour assurer la synchronisation et l'exécution séquentielle du code, en particulier dans certains scénarios complexes, par exemple lorsque nous devons nous assurer qu'avant qu'une certaine fonction ne termine son exécution, une autre fonction doit attendre le résultat qu'il renvoie. À l'heure actuelle, nous devons utiliser certaines techniques pour implémenter le blocage JavaScript.

Cet article présentera quelques méthodes pour implémenter le blocage JavaScript, notamment :

1. Utilisez setTimeout
2. Utilisez Promise
3. Utilisez async/await
4. Utilisez Generator

Utilisez setTimeout pour implémenter le blocage JavaScript

Quand nous en avons besoin Lors de l'implémentation du blocage en JavaScript, setTimeout est une méthode très courante. setTimeout peut créer une minuterie pour effectuer une tâche spécifiée après une période de temps. En définissant le paramètre time du timer sur 0, nous pouvons laisser l'exécuteur JavaScript exécuter la fonction dans ce timer après avoir terminé la tâche en cours. De cette façon, nous pouvons simuler le blocage de JavaScript.

L'exemple de code est le suivant :

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Start');
  await sleep(5000); // sleep for 5 seconds
  console.log('End');
}

demo();

Dans cet exemple de code, nous définissons une fonction nommée sleep, qui appelle la méthode setTimeout et renvoie un objet Promise. Lorsque nous appelons la méthode sleep dans la fonction de démonstration, l'exécuteur JavaScript attendra 5 secondes avant d'exécuter le code suivant.

Utilisez Promise pour implémenter le blocage en JavaScript

Promise est un modèle de programmation asynchrone très important en JavaScript. En utilisant Promises, nous pouvons convertir les opérations asynchrones en modèles synchrones, ce qui facilite la synchronisation et la lisibilité du code.

L'exemple de code est le suivant :

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function demo() {
  console.log('Start');
  sleep(5000).then(() => {
    console.log('End');
  });
}

demo();

Dans cet exemple de code, nous utilisons toujours la fonction sleep pour simuler les opérations de blocage, mais cette fois nous utilisons un objet Promise. Lorsque nous appelons la méthode sleep dans la fonction de démonstration, elle renverra un objet Promise. Nous pouvons enregistrer une fonction de rappel en appelant la méthode then et exécuter cette fonction de rappel lorsque la promesse est terminée. Cette fois, au lieu d'utiliser les mots-clés async et wait, les objets Promise maintiennent le code synchronisé et lisible.

Utilisez async/await pour implémenter des opérations de blocage en JavaScript

ES6 a introduit les mots-clés async/await Grâce à ces mots-clés, nous pouvons gérer plus facilement les objets Promise pour implémenter des opérations de blocage en JavaScript.

L'exemple de code est le suivant :

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Start');
  await sleep(5000);
  console.log('End');
}

demo();

Dans cet exemple de code, nous utilisons les mots-clés async et wait et plaçons la fonction sleep dans un corps de fonction asynchrone. Lorsque nous appelons la méthode sleep dans la fonction de démonstration, elle attendra automatiquement la fin de l'objet Promise. Cette approche nous permet de clarifier la différence entre le blocage et le non-blocage dans le code et de garder le code concis et lisible.

Utilisez Generator pour implémenter le blocage JavaScript

Generator est une fonction JavaScript spéciale qui peut être interrompue et reprise. Les générateurs peuvent parcourir des tâches asynchrones et être mélangés à d'autres flux de contrôle pour implémenter des opérations de blocage en JavaScript.

L'exemple de code est le suivant :

function* demo() {
  console.log('Start');
  yield sleep(5000);
  console.log('End');
}

function sleep(ms) {
  setTimeout(() => {
    it.next();
  }, ms);
}

const it = demo();
it.next();

Dans cet exemple de code, nous utilisons la fonction Générateur et y mettons la fonction veille. Lorsque nous appelons le mot-clé rendement dans la fonction de démonstration, il mettra en pause l'état d'exécution actuel et attendra la fin de l'exécution de la fonction sleep. Une fois la fonction de veille terminée, l'exécuteur JavaScript reviendra à la fonction de démonstration et continuera à exécuter le code suivant.

Conclusion

JavaScript est un langage de programmation très puissant et flexible, et sa nature asynchrone en fait également un très bon langage de script. Mais dans certains cas, nous devons sacrifier certaines de ses fonctionnalités asynchrones pour réaliser des opérations plus séquentielles et synchrones. Grâce à plusieurs méthodes présentées dans cet article, nous pouvons mieux contrôler le processus d'exécution de JavaScript et écrire un code plus robuste et efficace.

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!