Я читаю эту статью о микротомах, и есть следующий вывод:
В итоге:
- Задачи выполняются по порядку, и браузер может отображать между ними
- Микротовары выполняются в порядке и выполняются:
- после каждого обратного вызова,
- пока какой-либо другой JavaScript не выполняется в середине каждой задачи
Поскольку я понимаю, что каждая задача представляет собой один поворот виртуальной машины, так как ни один другой JavaScript не является средним исполнением в конце каждой задачи, значит, когда стек вызовов пуст. Но я не понимаю, что после каждого обратного вызова означает?
Может ли кто-нибудь объяснить и показать пример?
Вот ясный пример, демонстрирующий это:
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
и до того, как браузер завершил выполнение всех обратных вызовов в текущей задаче.
Важно то, что все обратные вызовы событий выполняются в текущей задаче.