Что означает выполнение микрозадачи после каждого обратного вызова?

Question

Что означает выполнение микрозадачи после каждого обратного вызова?

1

Я читаю эту статью о микротомах, и есть следующий вывод:

В итоге:

Задачи выполняются по порядку, и браузер может отображать между ними

Микротовары выполняются в порядке и выполняются:
после каждого обратного вызова,

пока какой-либо другой JavaScript не выполняется в середине каждой задачи

Поскольку я понимаю, что каждая задача представляет собой один поворот виртуальной машины, так как ни один другой JavaScript не является средним исполнением в конце каждой задачи, значит, когда стек вызовов пуст. Но я не понимаю, что после каждого обратного вызова означает?

Может ли кто-нибудь объяснить и показать пример?

Max Wizard K 10 июнь 2017, в 14:51

Источник

Теги:

javascript

asynchronous

1 ответ

Ещё вопросы

Max Wizard K · Accepted Answer · 2017-06-11T13-02-00.000Z

Вот ясный пример, демонстрирующий это:

function cb1() {
    console.log('cb1');
    Promise.resolve('df').then(function promiseMicrotask() {
        console.log('promise');
    });
}

function cb2() {
    console.log('cb2');
}

const element = document.querySelector('div.inner');
element.addEventListener('click', cb1);
element.addEventListener('click', cb2);

В приведенном выше примере, когда вы нажимаете на div.inner, а графики браузера задача обработать событие и вызвать обратные вызовы cb1 и cb2. Позже он начинает выполнение задачи и запускает cb1. Внутри cb1 разрешенное обещание планирует микрозадачу для выполнения обратного вызова promiseMicrotask. Всякий раз, когда текущий стек, который начинается с cb1, пуст, браузер проверяет очередь микротеков и находит microtask promiseMicrotask. Он запускает его, и поэтому он записывает promise. Затем он переходит к cb2.

Таким образом, microtask promiseMicrotask обрабатывалась после обратного вызова cb1 но до cb2 и до того, как браузер завершил выполнение всех обратных вызовов в текущей задаче.

Важно то, что все обратные вызовы событий выполняются в текущей задаче.

Хороший! Как отмечено в статье, поведение не одинаково во всех браузерах. Это поведение в Chrome (v59), Edge (v40), но не в Firefox (v53).
@ trincot, да, это странно, что новейшие версии Firefox до сих пор не исправили это. Кстати, вот обсуждение с автором twitter.com/jaffathecake/status/873963014986379265