Ajax-вызов не происходит сразу

Question

Я смотрю это видео на Youtube, где он объясняет стек вызовов, цикл обработки событий в случае асинхронных событий, таких как вызовы Ajax.Он сказал, что выполнение JavaScript происходит построчно.Давайте выполним пример программы:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(xhttp.responseText);
  }
};
xhttp.open("GET", 'https://httpbin.org/get', true);
xhttp.send();

let i = 1;
while (i < 1000000000) {
  i++;
}

console.log(i); 

Итак, я понимаю, что JS Engine поместит Ajax-вызов в стек вызовов и выполнит Ajax Call.Так как это занимает некоторое время, он передаст обратный вызов веб-API браузера и продолжит выполнение остальной части кода (в нашем случае цикл loop).Когда Ajax-вызов завершен, Web Apis поместит обратный вызов в очередь задач.Если стек вызовов пуст, Event Loop снова поместит обратный вызов в стек и обратный вызов будет выполнен.В нашей программе я специально увеличил счет, чтобы цикл обработки событий ожидал завершения цикла while, даже если вызов Ajax выполнен.Но когда я запустил вышеуказанную программу, вызов ajax был сделан только после завершения цикла.Тогда какой смысл писать вызов ajax перед циклом while.Я ожидаю, что вызов Ajax сработает немедленно, но выводит ответ после цикла while.Я что-то не так понял?

Answer 1

Я постараюсь ответить на этот вопрос, если кто-то еще сможет объяснить это более подробно или поправит меня, это также будет хорошим опытом обучения.

AJAX = Асинхронный Javascript And XML,Само имя оно заявляет, что функция будет асинхронной.Согласно видео, которое связал OP, кажется, что объяснение очень ясно о том, что такое асинхронные коды.Давайте сосредоточимся на «блокирующей» части Javascript.

В вашем примере этот вызов AJAX добавлен в стек, но поскольку это асинхронная функция, она не остановит выполнение следующего фрагмента кода,ваш цикл пока.Цикл while синхронный, поэтому он ОСТАНОВИТ все и позволит запустить время (а это значит, что ваш асинхронный режим теперь также заблокирован).

Поскольку console.log () является более быстрой функцией, чем ваш AJAX-результат, онсначала напечатает, а затем последует результат вызова http.

src: https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=412s