Résumé de l'apprentissage setTimeout

Cet article présente principalement le principe de setTimeout ; la signification de setTimeout(function(){..},0) ; les problèmes de pointeur this et de paramètre de setTimeout. Il a une très bonne valeur de référence. Regardons-le avec l'éditeur ci-dessous

Introduction générale

J'ai lu un article aujourd'hui et j'ai trouvé qu'il était bien écrit, donc j'ai étudié Après un certain temps, ce blog est ma propre compréhension et résumé

Texte original : Le secret de setTimeout que vous devriez savoir

Contenu principal :

1. Le principe de setTimeout

2. La signification de setTimeout(function(){..},0)

3. Les problèmes de pointeur et de paramètre this de setTimeout

Principe de setTimeout

Regardons d'abord un morceau de code :

var start = new Date();
 setTimeout(function(){
  console.log(new Date() - start);
 },500);
 while(new Date() - start <= 1000 ){}

Le résultat final est 1003 (les nombres peuvent être différents, mais ils sont tous supérieurs à 1000)

La raison pour laquelle un tel nombre est affiché est que lorsque setTimeout est exécuté, le code sera mis dans la file d'attente d'exécution après 500 ms, mais puis la boucle while sera exécutée, et la boucle while occupera les ressources de l'ordinateur et occupera 1000 ms, dans ces 1000 ms, toutes les tâches dans la file d'attente doivent attendre la fin de la boucle while

On peut le voir. que le principe de setTimeout est d'ajouter la tâche à la file d'attente après un temps donné et d'attendre l'exécution de la planification du CPU, cela ne garantit pas quand la tâche sera exécutée

La signification de setTimeout(function( ){..},0)

Parfois j'ai vu du code comme celui-ci :

 setTimeout(function(){
  //...........
 },0);

Après l'étude précédente , j'aurais pensé que lorsque le code est exécuté sur setTimeout, la tâche sera immédiatement ajoutée à la file d'attente d'exécution. En fait, ce n'est pas le cas. Bien que le temps d'exécution différé donné soit 0, setTimeout a son propre temps de retard minimum (qui varie en fonction du navigateur), donc même si 0 est écrit, setTimeout ajoutera toujours la tâche après le minimum. temps de retard. Le but de mettre

à 0 dans la file d'attente d'exécution est de changer l'ordre d'exécution des tâches ! Parce que le navigateur finira d'exécuter les tâches dans la file d'attente des tâches actuelle, puis exécutera les tâches accumulées dans la file d'attente setTimeout

Par exemple :

window.onload = function(){
 document.querySelector('#one input').onkeydown = function(){
  document.querySelector('#one span').innerHTML = this.value;
 };
 document.querySelector('#two input').onkeydown = function(){
  setTimeout(function(){
  document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;
  },0)
 }
 }

Ce problème se produira :

On peut constater que lors de l'utilisation de la première méthode d'écriture, seul le contenu de la zone de saisie avant d'appuyer sur le clavier

La raison du problème est que lorsque nous appuyons sur le clavier, le moteur JavaScript exécutera le gestionnaire d'événements keydown, et la mise à jour de la valeur dans la zone de saisie est exécutée après cela, donc lors de l'obtention de la valeur dans la zone de saisie ( this.value ), la valeur dans la zone de saisie est toujours mise à jour.

La solution est d'utiliser setTimeout. Après avoir mis à jour la valeur de la zone de saisie, obtenez sa valeur

setTimeout est ce problème de pointage et de paramètre

Le ceci de la fonction de rappel dans setTimeout pointe vers la fenêtre

Par exemple :

var a = 1;
 var obj = {
  a : 2,
  output : function(){
  setTimeout(function(){
   console.log(a);
  },0);
  }
 }
 obj.output(); //1

Mais nous pouvons utiliser apply(), call( ) et bind() pour changer le pointeur de ce

dans setTimeout est généralement deux paramètres, mais il peut avoir plusieurs paramètres

par exemple :

 setTimeout(function(a,b){
  console.log(a); //2
  console.log(b); //4
  console.log(a + b); //6
 },0,2,4);

Comme vous pouvez le voir, ces nombreux paramètres sont les paramètres à transmettre dans la fonction de rappel

Pour plus d'articles sur le résumé d'apprentissage de setTimeout, veuillez faire attention au site Web PHP chinois !