Розуміння синхронних і асинхронних в JavaScript - частина 2. T
У першій частині цієї посади ми побачили, як поняття синхронного та асинхронного сприймаються у JavaScript. У цій другій частині, пан X з'являється знову, щоб допомогти нам зрозуміти як setTimeout і AJAX API роботи.
Незвичайний запит
Давайте повернемося назад до історії пана Х і фільму, на який ви хочете поїхати. Скажімо, ви залишите завдання для пана X перед прогулянкою, і скажіть йому, що він може тільки почати працювати над цим завданням п'ять годин після він отримав ваше повідомлення.
Він не в захваті від цього, пам'ятайте, він не бере нове повідомлення, поки не закінчить з поточним, і якщо він візьме твій, він потрібно чекати п'ять годин навіть розпочати завдання. Отже, щоб не витрачати час, він приносить помічника, Г-н Х.
Замість того, щоб чекати, він просить містера H залишити нове повідомлення для завдання в черзі після закінчення даних годин і переходить до наступного повідомлення.
Минуло п'ять годин; Г-н Х оновлює чергу з новим повідомленням. Після того, як він закінчив обробку всіх накопичених повідомлень до того, як пан Х, пан Х виконує запитане завдання. Таким чином, ви можете залишити запит виконувалися пізніше, і не чекайте, поки вона не буде виконана.
Але чому пан Х залишає повідомлення в черзі, а не безпосередньо звертається до пана Х? Тому що, як я згадував у першій частині, тільки Як зв'язатися з п. Х є залишивши йому повідомлення через телефонний дзвінок - немає винятків.
1. setTimeout () метод
Припустимо, у вас є набір коду, який ви хочете виконати через певний час. Щоб зробити це, ви просто оберніть його у функцію, і додайте його до setTimeout () метод разом із часом затримки. Синтаксис setTimeout () виглядає наступним чином:
setTimeout (функція, час затримки, arg…)
The аргумент… параметр означає будь-який аргумент, який виконує функція, і час затримки додаватиметься в мілісекундах. Нижче наведено простий приклад коду, який виводить “Гей” через 3 секунди в консолі.
setTimeout (function () console.log ('hey'), 3000); Одного разу setTimeout () починає працювати, замість того, щоб блокувати стек викликів до закінчення зазначеного часу затримки, a Таймер спрацьовує, і стек викликів поступово спорожняється для наступного повідомлення (подібно до листування між Mr X і Mr H).
Коли таймер закінчиться, з'явиться нове повідомлення приєднується до черги, і цикл подій вибирає його, коли стек викликів є вільним після обробки всіх повідомлень перед ним - таким чином, код виконується асинхронно.
2. AJAX
AJAX (асинхронний JavaScript і XML) - це концепція, яка використовує XMLHttpRequest (XHR) API для зробити запити на сервер і обробляти відповіді.
Коли браузери роблять серверні запити без використання XMLHttpRequest, Оновлення сторінки і перезавантажує свій інтерфейс користувача. При обробці запитів і відповідей обробляється XHR API, і Інтерфейс користувача залишається незмінним.
Отже, основною метою є робити запити без перезавантаження сторінок. Тепер, де знаходиться “асинхронний” у цьому? Просто використання XHR-коду (який ми побачимо за хвилину) не означає, що це AJAX, оскільки API XHR може працювати як синхронно, так і асинхронно.
XHR за замовчуванням встановлено на працювати асинхронно; коли функція робить запит, використовуючи XHR, він повертається без очікування відповіді.
Якщо XHR налаштовано на бути синхронними, потім функція чекає, поки відповідь отримано і оброблено перед поверненням.
Код Приклад 1
У цьому прикладі наведено XMLHttpRequest створення об'єкта. The відчинено() метод, перевіряє URL-адресу запиту і надіслати () метод надсилає запит.
var xhr = new XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Будь-який прямий доступ до даних відповіді після надіслати () буде марно, тому що надіслати () не чекає до завершення запиту. Пам'ятайте, що XMLHTTPRequest встановлено для роботи асинхронно за замовчуванням.
Код Приклад 2
The hello.txt Файл у цьому прикладі - це простий текстовий файл, що містить текст 'hello'. The відповідь властивість XHR недійсний, оскільки він не виводив текст "hello".
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) // пише 'hello' у документі Відповідь всередині події завантаження виводить "привіт", правильний текст.
Переважний асинхронний шлях є кращим, оскільки він не блокує інші сценарії, поки запит не буде завершено.
Якщо відповідь має бути оброблена синхронно, ми проходимо помилковий як останній аргумент відчинено, котрий позначає API XHR кажучи має бути синхронним (за замовчуванням останній аргумент відчинено є вірно, які не потрібно чітко вказувати).
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt", "false"); xhr.send (); document.write (xhr.response); // пише 'hello' до документа Навіщо все це вивчати?
Майже всі початківці роблять деякі помилки з асинхронними поняттями, такими як setTimeout () і AJAX, наприклад, припускаючи setTimeout () виконує код після часу затримки або обробляє відповідь безпосередньо всередині функції, що виконує AJAX-запит.
Якщо ви знаєте, як головоломка вписується, то можете уникнути такої плутанини. Ви знаєте, що час затримки в setTimeout () не вказує час при запуску коду, але час після закінчення таймера і нове повідомлення стоїть в черзі, яке буде оброблятися тільки тоді, коли стек викликів буде вільним для цього.
