JavaScript является однопоточным и имеет модель синхронного выполнения. Однопоточный означает, что одна команда выполняется одновременно. Синхронный означает, что по одному, то есть одна строка кода выполняется за раз, чтобы код появился. Так что в JavaScript одна вещь происходит одновременно.
Контекст выполнения
Механизм JavaScript взаимодействует с другими механизмами в браузере.
В стеке выполнения JavaScript есть глобальный контекст внизу, а затем, когда мы вызываем функции, механизм JavaScript создает новые контексты выполнения для соответствующих функций. Когда вызываемая функция выходит, ее контекст выполнения извлекается из стека, а затем извлекается следующий контекст выполнения и так далее ...
Например
function abc()
{
console.log('abc');
}
function xyz()
{
abc()
console.log('xyz');
}
var one = 1;
xyz();
В приведенном выше коде будет создан глобальный контекст выполнения, и в этом контексте var one будет сохранен, и его значение будет равно 1 ... при вызове xyz (), тогда будет создан новый контекст выполнения и если бы мы определили любую переменную в функции xyz, эти переменные были бы сохранены в контексте выполнения xyz (). В функции xyz мы вызываем abc (), а затем создается контекст выполнения abc () и помещается в стек выполнения ... Теперь, когда abc () завершает, его контекст извлекается из стека, затем контекст xyz () извлекается из стек и тогда глобальный контекст будет вытолкнут ...
Теперь об асинхронных обратных вызовах; асинхронный означает более одного за один раз.
Так же, как и стек выполнения, существует Очередь событий . Когда мы хотим получить уведомление о каком-либо событии в движке JavaScript, мы можем прослушать это событие, и это событие помещается в очередь. Например, событие запроса Ajax или событие запроса HTTP.
Всякий раз, когда стек выполнения пуст, как показано в приведенном выше примере кода, механизм JavaScript периодически просматривает очередь событий и определяет, есть ли какое-либо событие, о котором следует уведомить. Например, в очереди было два события: запрос ajax и запрос HTTP. Он также проверяет, есть ли функция, которая должна быть запущена для этого триггера события ... Таким образом, механизм JavaScript уведомляется о событии и знает соответствующую функцию для выполнения в этом событии ... Таким образом, механизм JavaScript вызывает функция-обработчик, в примере, например, AjaxHandler () будет вызываться и, как всегда, когда вызывается функция, ее контекст выполнения помещается в контекст выполнения, и теперь выполнение функции завершается, а запрос ajax события также удаляется из очереди событий ... Когда AjaxHandler () завершает стек выполнения пуст, поэтому механизм снова просматривает очередь событий и запускает функцию обработчика событий HTTP-запроса, который был следующим в очереди. Важно помнить, что очередь событий обрабатывается только тогда, когда стек выполнения пуст.
Например, см. Код ниже, объясняющий стек выполнения и обработку очереди событий движком Javascript.
function waitfunction() {
var a = 5000 + new Date().getTime();
while (new Date() < a){}
console.log('waitfunction() context will be popped after this line');
}
function clickHandler() {
console.log('click event handler...');
}
document.addEventListener('click', clickHandler);
waitfunction(); //a new context for this function is created and placed on the execution stack
console.log('global context will be popped after this line');
И
<html>
<head>
</head>
<body>
<script src="program.js"></script>
</body>
</html>
Теперь запустите веб-страницу и нажмите на страницу, и увидите вывод на консоли. Выход будет
waitfunction() context will be popped after this line
global context will be emptied after this line
click event handler...
Механизм JavaScript выполняет код синхронно, как объяснено в части контекста выполнения, браузер асинхронно помещает вещи в очередь событий. Таким образом, функции, выполнение которых занимает очень много времени, могут прерывать обработку событий. Вещи, происходящие в браузере, такие как события, обрабатываются таким образом JavaScript, если есть прослушиватель, который должен работать, движок запускает его, когда стек выполнения пуст. А события обрабатываются в том порядке, в котором они происходят, поэтому асинхронная часть рассказывает о том, что происходит вне механизма, то есть, что должен делать механизм, когда происходят эти внешние события.
Так что JavaScript всегда синхронен.