Explication détaillée des fonctions de file d'attente JS et exemples d'exécution asynchrone

Cet article présente principalement les informations pertinentes sur la fonction de file d'attente JavaScript et l'exécution asynchrone en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Modifier Remarque : j'ai vu un article similaire. fonction de file d'attente lors de l'examen du code JavaScript d'autres personnes, mais je ne l'ai pas bien compris. Il s'avère que c'est pour garantir que les fonctions sont appelées dans l'ordre. Après avoir lu cet article, j'ai découvert qu'il pouvait également être utilisé pour une exécution asynchrone, etc.

Supposons que vous ayez plusieurs fonctions fn1, fn2 et fn3 qui doivent être appelées dans l'ordre. La manière la plus simple est bien sûr :

fn1();
fn2();
fn3();

Mais parfois ces fonctions sont ajoutées une par une pendant. runtime. Oui, vous ne savez pas quelles fonctions il y a lors de l'appel ; à ce stade, vous pouvez prédéfinir un tableau, y insérer les fonctions lors de l'ajout de fonctions et les retirer du tableau une par une dans l'ordre. nécessaires, et appelez-les dans l'ordre :

var stack = [];
// 执行其他操作，定义fn1
stack.push(fn1);
// 执行其他操作，定义fn2、fn3
stack.push(fn2, fn3);
// 调用的时候
stack.forEach(function(fn) { fn() });

De cette façon, peu importe que la fonction ait un nom ou non. Vous pouvez simplement transmettre la fonction anonyme directement. . Testons-le :

var stack = [];
function fn1() {
  console.log('第一个调用');
}
stack.push(fn1);

function fn2() {
  console.log('第二个调用');
}
stack.push(fn2, function() { console.log('第三个调用') });

stack.forEach(function(fn) { fn() }); // 按顺序输出'第一个调用'、'第二个调用'、'第三个调用'

Cette implémentation fonctionne bien jusqu'à présent, mais nous avons ignoré une situation, qui est l'appel de fonctions asynchrones. L'asynchronie est un sujet incontournable en JavaScript. Je ne vais pas aborder ici les différents termes et concepts liés à l'asynchrone en JavaScript. Les lecteurs sont invités à le vérifier par eux-mêmes (comme un commentaire célèbre). Si vous savez que le code suivant affichera 1, 3 et 2, continuez à lire :

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

console.log(3);

S'il existe une fonction dans la file d'attente de la pile qui est une fonction asynchrone similaire, notre implémentation sera foiré :

var stack = [];

function fn1() { console.log('第一个调用') };
stack.push(fn1);

function fn2() {
  setTimeout(function fn2Timeout() {
     console.log('第二个调用');
  }, 0);
}
stack.push(fn2, function() { console.log('第三个调用') });

stack.forEach(function(fn) { fn() }); // 输出'第一个调用'、'第三个调用'、'第二个调用'

Le problème est évident. fn2 est bien appelé dans l'ordre, mais la fonction fn2Timeout() { console.log('Second call') } dans setTimeout n'est pas exécutée immédiatement (même si timeout est défini sur 0); fn2 revient immédiatement après avoir été appelé, puis exécute fn3. Une fois fn3 exécuté, c'est en fait le tour de fn2Timeout.

Comment le résoudre ? Après notre analyse, la clé ici est fn2Timeout. Nous devons attendre qu'elle soit réellement exécutée avant d'appeler fn3. Idéalement, cela ressemblerait à ceci :

function fn2() {
  setTimeout(function() {
    fn2Timeout();
    fn3();
  }, 0);
}

Mais cela équivaut à remplacer entièrement le fn2Timeout d'origine. . dans une nouvelle fonction, puis insérez les fn2Timeout et fn3 d'origine. Cette méthode de modification dynamique de la fonction d'origine porte un terme spécial appelé Monkey Patch. Selon le mantra de nos programmeurs : "Cela peut certainement être fait", mais c'est un peu délicat à écrire, et il est facile de s'impliquer. Existe-t-il une meilleure façon ?
Nous prenons du recul et n'insistons pas pour attendre que fn2Timeout soit complètement exécuté avant d'exécuter fn3. Au lieu de cela, nous l'appelons sur la dernière ligne du corps de la fonction fn2Timeout :

function fn2() {
  setTimeout(function fn2Timeout() {
    console.log('第二个调用');
    fn3();    // 注{1}
  }, 0);
}

Cela ressemble. mieux, mais définissez fn2 Il n'y avait pas de fn3 à l'époque. D'où vient ce fn3 ?

Il y a un autre problème. Puisque fn3 doit être appelé dans fn2, nous ne pouvons pas appeler fn3 via stack.forEach, sinon fn3 sera appelé deux fois.

Nous ne pouvons pas écrire fn3 dans fn2. Au lieu de cela, il nous suffit de trouver la fonction suivante de fn2 dans la pile à la fin de fn2Timeout, puis d'appeler :

function fn2() {
  setTimeout(function fn2Timeout() {
    console.log('第二个调用');
    next();
  }, 0);
}

Cette fonction suivante est chargée de trouver la fonction suivante dans la pile et de l'exécuter . Implémentons next maintenant :

var index = 0;

function next() {
  var fn = stack[index];
  index = index + 1; // 其实也可以用shift 把fn 拿出来
  if (typeof fn === 'function') fn();
}

next utilise stack[index] pour obtenir la fonction dans la pile. Chaque fois que next est appelé, l'index sera incrémenté de 1, afin d'atteindre l'objectif de récupération. la fonction suivante.
Next s'utilise comme ceci :

var stack = [];

// 定义index 和next

function fn1() {
  console.log('第一个调用');
  next(); // stack 中每一个函数都必须调用`next`
};
stack.push(fn1);

function fn2() {
  setTimeout(function fn2Timeout() {
     console.log('第二个调用');
     next(); // 调用`next`
  }, 0);
}
stack.push(fn2, function() {
  console.log('第三个调用');
  next(); // 最后一个可以不调用，调用也没用。
});

next(); // 调用next，最终按顺序输出'第一个调用'、'第二个调用'、'第三个调用'。

Maintenant que la ligne stack.forEach a été supprimée, nous appelons next par nous-mêmes Next trouvera la première fonction fn1 dans la pile à exécuter et appellera. next dans fn1 , pour trouver la fonction suivante fn2 et l'exécuter, puis appelez next dans fn2, et ainsi de suite.
Chaque fonction doit appeler next. Si elle n'est pas écrite dans une certaine fonction, le programme se terminera directement après l'exécution de la fonction sans aucun mécanisme pour continuer.

Après avoir compris cette implémentation de la file d'attente des fonctions, vous devriez être capable de résoudre la question d'entretien suivante :

// 实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)
/* 输出: 
Hi! This is Hank!
*/

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
/* 输出: 
Hi! This is Hank!
// 等待10秒..
Wake up after 10
Eat dinner~
*/

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)
/* 输出: 
Hi This is Hank!
Eat dinner~
Eat supper~
*/

LazyMan(“Hank”).sleepFirst(5).eat(“supper”)
/* 等待5秒，输出
Wake up after 5
Hi This is Hank!
Eat supper
*/

// 以此类推。

Node.js La célèbre connexion de ZhongdaCeci C'est ainsi que le framework implémente la file d'attente middleware. Si vous êtes intéressé, vous pouvez jeter un oeil à son code source ou à cette explication "Qu'est-ce que le middleware de connexion".

Si vous faites attention, vous verrez peut-être que ce next ne peut être placé qu'à la fin de la fonction pour le moment. S'il est placé au milieu, le problème d'origine se produira toujours :

function fn() {
  console.log(1);
  next();
  console.log(2); // next()如果调用了异步函数，console.log(2)就会先执行
}

redux et Grâce à différentes implémentations, koa peut placer next au milieu de la fonction, après avoir exécuté les fonctions suivantes, il peut ensuite revenir en arrière et exécuter le code ci-dessous. Écrivez à nouveau quand vous aurez le temps.

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!