Здравствуйте, JavaScript асинхронное программирование ---- понять красоту асинхронного JavaScript

внешний интерфейс JavaScript Promise Ajax

Я вернулся после тренировки некоторое время

Вы не можете писать о бизнесе каждый день, но вы не можете писать только о бизнесе. Поэтому я выбрал контент, который я не понимал, когда еще учился в школе, чтобы закрепить его, синхронные и асинхронные проблемы. Прежде чем усвоить знание, вы должны сначала задать себе вопрос три раза. Зачем это? Как это работает? Что происходит с этим?

Почему есть синхронный и асинхронный?

Во-первых, JS — это однопоточный язык. Смысл одиночного потока аналогичен тому, что от начала до конца, все равно кто, я остановлюсь, когда впереди пробки (официальный: когда один поток выполняет программу, пути программы, которые она принимает, упорядочиваются в последовательном порядке, фронт должен быть обработан хорошо, последний будет выполнен.), нет возможности открыть несколько потоков.

Приходят сомнения? Почему JS не предназначен для многопоточности и может открывать несколько потоков для одновременной работы. JS может манипулировать DOM. Предположим, JS разработан как многопоточный язык. Ваш основной поток выполняет назначение innerHtml DOM, а другой ваш поток удаляет структуру DOM. . . . Конечно нет. (Несколько потоков могут работать с пространством памяти, не мешая друг другу). Поэтому он просто предназначен для одного потока, даже если веб-воркеру, появившемуся в HTML5 на более позднем этапе, не разрешено работать со структурой DOM, он может выполнять некоторые распределенные вычисления. Для структуры dom мы должны манипулировать ею последовательно, и абсолютно не разрешается работать с одним и тем же dom одновременно.

Однако браузер загружает некоторые ресурсы изображений, для которых требуются сетевые запросы, например ресурсы изображений и ajax. Или содержание обучения ротации. Поскольку это один поток, вам нужно дождаться доступа к этому содержимому, прежде чем выполнять следующий код. Потом вы отправляете ajax запрос или запрашиваете ресурс картинки, то за это время ничего нельзя сделать.Этот эффект своего рода блокировка для программы.Во время ожидания очевидно, что вы можете сделать что-то еще, но вы выбираете бессмысленное ожидание. (Синхронная блокировка) В это время происходит асинхронность. Когда дело доходит до операций, которые нужно ждать, мы выбираем, чтобы программа продолжала работать. Когда время ожидания истекло, уведомите нас, что содержимое программы завершено , и вы можете управлять этими ресурсами.Этот абзац Время ожидания не влияет на дальнейшее выполнение вашей программы, но в определенное время в будущем (не уверен) есть операция, которая точно будет выполнена, которая является асинхронной. (асинхронные неблокирующие), поэтому есть синхронные асинхронные.

Мы закончили объяснять основное содержание, давайте приступим к настоящей галантерейной продукции.

(В первый раз, чтобы понять это, пожалуйста, исправьте знание таймеров и промисов)

xxxxxxxxx(一堆不确定的代码)

setTimeout(()=>{console.log(111)},500);

Когда будет распечатан номер 111? Ответ - печатать, когда 500 мс

неправильно! Ответ: 500 мс или некоторый период времени после 500 мс.

После первой встречи с таймером функция в таймере будет зарегистрирована, то есть помещена в таблицу событий. Затем поместите функцию, зарегистрированную в таблице событий, в очередь событий через 500 мс. Если стек вызовов (стек вызовов, то есть стек вызовов функции в потоке) в основном потоке (я тоже поток) пуст, очередь событий помещается в стек вызовов в порядке выполнения. Если стек вызовов не пуст, события в очереди событий не попадут в стек вызовов и не будут выполнены.

Почему вдруг так много хаоса, и стиль рисования отличается от только что. Сложность возросла.

Прежде всего, для асинхронных событий, когда мы выполняем эту строку кода, мы будем выполнять регистрацию, регистрировать функцию, которую вы хотите выполнить в определенное время в будущем, и помещать ее в таблицу событий. В этой таблице событий может быть много событий, например, если вы отправите много ajax-запросов за один раз, они все будут зарегистрированы. Когда время в будущем истечет, зарегистрированные события будут помещены в очередь событий (очередь задач).Эта очередь задач представляет собой содержимое, которое должно быть выполнено немедленно.

Когда очередь задач может быть выполнена? Когда стек вызовов основного потока пуст, первое событие очереди задач будет помещено в стек вызовов для выполнения, в котором задействована очередь (очередь), характеризующаяся принципом «первым пришел — первым обслужен». События, помещенные в очередь событий после регистрации, покинут очередь событий раньше и попадут в основной поток для выполнения. Вы чувствуете, что теперь что-то понимаете? Увы, не слишком радуйтесь.

Давай, поговорим о макрозадачах и микрозадачах

setTimeout(()=>{console.log(111)},0)

let promise = new Promise((resolve,reject)=>{
	console.log(222);
	resolve(3333)
});

let promise2 = new Promise((resolve,reject)=>{
	console.log(555);
	resolve(6666)
});

setTimeout(()=>{
	console.log(4444);
},0)

promise.then(res=>{
	console.log(res);
});

promise2.then(res=>{
	console.log(res);
});

Что вы говорите, что это распечатает? Согласно теории «первым пришел — первым вышел», 222 555 111 4444 333 666 Правильно видите. Факты: 222 555 333 666 111 4444 почему это? События, регистрируемые первыми, также имеют разные формы, макрозадачи и микрозадачи.

Общие задачи макроса: setTimeout, setInterval (класс таймера)

Общие микрозадачи: обещание process.nextTick (метод в среде узла).

Каковы правила выполнения этих двух задач? Во-первых, после того, как содержимое стека вызовов будет очищено и выполнено, очередь событий проверит, какие задачи являются макрозадачами, а какие — микрозадачами, затем выполнит все микрозадачи, затем выполнит макрозадачу, а затем снова выполнит все микрозадачи. То есть после выполнения основной задачи потока будут выполнены все микрозадачи в очереди задач, а затем будет выполнена макрозадача.После выполнения макрозадачи микрозадачи в очереди задач очередь будет проверена еще раз макро задача.

Почему я не могу написать ни одной строки асинхронного кода?

После того, как я ясно понял эту концепцию, я немного понимаю, но я не могу написать строку реального асинхронного кода, которая отделена от таймеров, событий и ajax, Я думал о том, как реализовать асинхронное уведомление о сообщении об уведомлении о сообщении ? Шаблон наблюдателя? Нет никакого способа смоделировать это, и у меня есть задача, которую нужно выполнить за 10 минут. думал долго. В однодневном обзоре требований нам нужно сделать требование для регулярных напоминаний, В это время в назначении фоновой задачи выбрано несколько дней для создания запланированной задачи. На этот раз я понимаю. Напоминание о времени в Java заключается в открытии нового потока для непрерывного опроса времени.Интервал может быть установлен, но чем меньше интервал, тем больше потребляется производительность машины. Позже я узнал, что JS — это один поток, а браузер — нет, но движок, выполняющий JS-код, — это один поток, поэтому JS-код не может открывать несколько потоков, но в браузере также есть потоки таймера, триггер событий потоки и асинхронные потоки, поток HTTP-запросов, поток GUI.

Поэтому при выполнении асинхронных событий, таких как таймеры, события и ajax, остальные три потока выполняют код, а не механизм JS.Когда эти потоки достигают определенного события, задача помещается в поток механизма JS, а при В то же время поток GUI (поток, который отображает интерфейс HTMl) и поток JS являются взаимоисключающими, и поток GUI будет заморожен и приостановлен при выполнении механизма JS.

Наконец, последний JS — однопоточный, а браузер — многопоточный. Ваша асинхронная задача выполняется браузером, открывающим соответствующий поток, и, наконец, помещается в механизм JS для выполнения.

Продолжение следует

Сегодня я в основном понимаю, что означает асинхронная задача JS. Следующий раздел (может быть, на следующей неделе или на следующей неделе) Я собираюсь разобраться и узнать об обещаниях, асинхронном/ожидающем и адском обратном вызове. Увидимся в следующий раз на эту тему.

Если содержание неприемлемо, приветствуйте всех, кто дает указатели в области комментариев~~~

Наконец, сделайте рекламу (учебный публичный аккаунт, который мы поддерживаем вместе)

Публика в основном дляЮниор/Фрешбеременность. Контент включает в себя ямы, которые мы прошли от новых студентов до развития на рабочем месте, а также наши еженедельные планы обучения и резюме обучения. содержание будет включатькомпьютерная сеть,алгоритми т.д.Фронтенд, Бэкенд, Androidи так далее~

求关注,不迷路

Статьи других друзей нашей группы:

Android-друзья

Java-друзья