Понимание синхронного и асинхронного в JavaScript - часть 2
В первой части этого поста мы увидели, как понятия синхронного и асинхронного воспринимаются в JavaScript. Во второй части мистер Х снова появляется, чтобы помочь нам понять как setTimeout и AJAX API-интерфейсы Работа.
Странный запрос
Давайте вернемся к истории мистера Икс и к фильму, ради которого вы хотите выйти. Скажем, вы оставляете задание для мистера X перед выходом и говорите ему, что он может только начать работать над этим заданием пять часов после он получил ваше сообщение.
Он не рад этому, помните, он не принимает новое сообщение, пока не закончит с текущим, и если он возьмет ваше, он должен ждать 5 часов даже начать на задании. Таким образом, чтобы не тратить время впустую, он приносит помощника, Мистер Н.
Вместо ожидания он просит мистера Х оставить новое сообщение для задачи в очереди по истечении заданных часов и переходит к следующему сообщению.
Прошло пять часов; Мистер Н обновляет очередь с новым сообщением. После того, как он завершил обработку всех накопленных сообщений до г-на Х, г-н Х выполняет заданную вами задачу. Таким образом, вы можете оставить заявку на соблюдается позднее, и не ждите, пока оно выполнится.
Но почему г-н Х оставляет сообщение в очереди, а не напрямую связывается с г-ном Х? Потому что, как я уже упоминал в первой части, только способ связаться с г-ном X является оставив ему сообщение по телефону - без исключений.
1. SetTimeout () метод
Предположим, у вас есть набор кода, который вы хотите выполнить через определенное время. Чтобы сделать это, вы просто оберните это в функцию, а также добавить его в SetTimeout () метод наряду с временем задержки. Синтаксис SetTimeout () как следует:
setTimeout (функция, время задержки, аргумент…)
Арг ... Параметр обозначает любой аргумент, который принимает функция, и Время задержки должен быть добавлен в миллисекундах. Ниже вы можете увидеть простой пример кода, который выводит “Привет” в консоли через 3 секунды.
setTimeout (function () console.log ('hey'), 3000); однажды SetTimeout () начинает работать, вместо того, чтобы блокировать стек вызовов до истечения указанного времени задержки, таймер срабатывает, и стек вызовов постепенно очищается для следующего сообщения (аналогично переписке между г-ном X и г-ном H).
Когда таймер истекает, новое сообщение присоединяется к очереди, и цикл обработки извлекает его, когда стек вызовов свободен после обработки всех сообщений перед ним - таким образом, код выполняется асинхронно.
2. AJAX
AJAX (асинхронный JavaScript и XML) - это концепция, которая использует XMLHttpRequest (XHR) API для делать запросы к серверу а также обрабатывать ответы.
Когда браузеры делают запросы к серверу без использования XMLHttpRequest, страница обновляется а также перезагружает свой интерфейс. Когда обработка запросов и ответов обрабатывается API XHR, и Интерфейс остается неизменным.
Итак, в основном цель состоит в том, чтобы делать запросы без перезагрузки страницы. Теперь, где находится “асинхронный” в этом? Просто использование кода XHR (который мы увидим чуть позже) не означает, что это AJAX, потому что API XHR может работать как синхронно, так и асинхронно.
XHR по умолчанию установлен в работать асинхронно; когда функция делает запрос с использованием XHR, она возвращается, не дожидаясь ответа.
Если XHR настроен на быть синхронным, затем функция ожидает, пока ответ получен и обработан перед возвращением.
Пример кода 1
Этот пример представляет XMLHttpRequest создание объекта. открыть() метод, проверяет URL-адрес запроса и Отправить() метод отправляет запрос.
var xhr = new XMLHttpRequest (); xhr.open ("GET", URL); xhr.send (); Любой прямой доступ к данным ответа после Отправить() будет напрасно, потому что Отправить() не ждет пока запрос не будет завершен. Помните, что по умолчанию XMLHTTPRequest настроен на асинхронную работу.
Пример кода 2
hello.txt Файл в этом примере представляет собой простой текстовый файл, содержащий текст «привет». ответ свойство XHR недопустимо, так как не выводит текст «привет».
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // пустой строки XHR реализует микро-рутину, которая продолжает проверять ответ в каждую миллисекунду и запускает бесплатные мероприятия для разных состояний запрос проходит. Когда ответ загружен, событие загрузки запускается XHR, который может доставить действительный ответ.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // записывает «привет» в документ Ответ внутри события загрузки выводит "привет", правильный текст.
Использование асинхронного способа является предпочтительным, поскольку оно не блокирует другие сценарии, пока запрос не будет завершен..
Если ответ должен обрабатываться синхронно, мы передаем ложный как последний аргумент открыть, который отмечает XHR API говоря это должен быть синхронным (по умолчанию последний аргумент открыть является правда, который вам не нужно явно указывать).
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // пишет привет в документ Зачем все это изучать?
Почти все новички делают некоторые ошибки с асинхронными понятиями, такими как SetTimeout () и AJAX, например, предполагая, SetTimeout () выполняет код по истечении времени задержки или обрабатывает ответ непосредственно внутри функции, выполняющей запрос AJAX.
Если вы знаете, как устроена головоломка, вы можете избежать такой путаницы. Вы знаете, что время задержки в SetTimeout () не указывает время когда начинается выполнение кода, но время когда таймер истекает и новое сообщение ставится в очередь, которое будет обрабатываться только тогда, когда стек вызовов свободен для этого.
