Почему возникает ошибка обратного отсчета setTimeout расширенного интерфейса?

JavaScript
  • Автор: Чен Даютоу
  • гитхаб:KRISACHAN
  • Связь:GitHub.com/Yvette LA U/S…
  • Фон: недавний старший интерфейсный инженерЛю СяойисуществуетgithubЯ открывал вопрос, связанный с интерфейсом, каждый рабочий деньrepo, Я также участвовал в этом с отношением обучения.Следующее мой ответ.Если что-то не так, я приветствую вас, чтобы указать на это.

потоки и процессы

Я считаю, что все часто слышат предложение, то есть"JS однопоточный", но что такоенить, чтоодин поток,имеютМногопоточность?

определение

Когда дело доходит до потоков, вы также должны говорить о процессах. На самом деле, по сути, оба существительных являются ЦПотрезок рабочего времениописание .

обработатьотносится к центральному процессоруВремя, необходимое для запуска инструкции, загрузки и сохранения контекста., размещенное в приложении, относится к программе, которая уже запущена на компьютере.

нитьЭто наименьшая единица, с которой операционная система может выполнять операции. это включено вобработатьСреди них описывает время, необходимое для выполнения инструкции.

  • Один поток: выполнение кода построчно от начала до конца в порядке написания кода.Если одна строка кода сообщает об ошибке, остальная часть кода не будет выполняться. Легко заблокировать код.
  • Многопоточность: код выполняется в разных средах, и каждый поток независим и не влияет друг на друга, чтобы избежать блокировки.

Темы в браузере

Темы в браузере делятся на следующие категории:

  • JS-поток
  • поток пользовательского интерфейса
  • поток событий
  • поток таймера
  • http-нить

Стек выполнения

Степ исполнения можно понимать как стек, используемый для хранения функций, чтобы следовать продвинутым принципам.

цикл событий

сторона узла

Цикл событий узла разделен на 6 этапов, они будут следоватьзаказзапускать неоднократно. Всякий раз, когда вводится определенный этап, функция будет извлечена из соответствующей очереди обратного вызова для выполнения. Когда очередь опустеет или количество выполненных callback-функций достигнет порога, установленного системой, произойдет переход к следующему этапу.

Цикл событий 6 этапов:

  1. timers
  2. I/O callbacks
  3. idle, prepare
  4. poll
  5. check
  6. close callbacks

сторона браузера

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

  • микроразвитие
    • process.nextTick
    • promise
    • Object.observe (раньше было предложением, ныне несуществующим)
    • MutationOberver
  • макрозадача
    • script
    • setTimeout
    • setInterval
    • setImmediate
    • I/O
    • Рендеринг пользовательского интерфейса

Порядок выполнения следующий:

  1. Выполнение синхронного кода, который является задачей макроса
  2. Стек выполнения пуст, запросите, есть ли микрозадачи для выполнения
  3. Рендеринг пользовательского интерфейса при необходимости
  4. перейти к следующему раундуEventLoop, который выполняет асинхронный код в задаче макроса

ошибка setTimeout

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

Давайте посмотрим на следующий код:

setTimeout(function () {
	console.log('biubiu');
}, 1000);

某个执行时间很长的函数();

Если функция под таймером выполняется 5 секунд, то лог в таймере нужно выполнить через 5 секунд, а функция занимает текущуюстек выполнения, подождите, пока стек выполнения завершит выполнение, прежде чем читатьмикрозадача,ЖдатьмикрозадачаГотово, в это время будет прочитаномакрозадачавнутриsetTimeoutФункция обратного вызова выполняется.setIntervalТочно так же, например, когда задача макроса ставится каждые 3 секунды, она должна дождаться завершения стека выполнения.

Есть еще такая ситуация:

setTimeout(function() {
    setTimeout(function() {
        setTimeout(function() {
            setTimeout(function() {
                setTimeout(function() {
                    setTimeout(function() {
                        console.log('嘤嘤嘤');
                    }, 0);
                }, 0);
            }, 0);
        }, 0);
    }, 0);
}, 0);

В последней спецификации есть такое предложение:If nesting level is greater than 5, and timeout is less than 4, then increase timeout to 4.

Значит смысл в том, что если таймаут вложен более 5 уровней, а интервал времени меньше 4мс, то интервал времени увеличивается до 4мс.

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95 Вы также можете отсканировать код, чтобы подписаться на официальный аккаунт и подписаться на более интересный контент.

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/qrcode-all.png

Категории