Подробное объяснение механизма таймера в читах JS ninja

внешний интерфейс JavaScript Google Vue.js
Подробное объяснение механизма таймера в читах JS ninja

предисловие

Только что дочитал "JS Ninja Cheats" некоторое время назад.Хоть он и вышел за 15 лет, некоторые вещи устарели, но не устарели такие механизмы как цепочка прототипов, замыкание, регулярность, таймер и т.д. Это. Все очень подробно, и это стоит прочитать. В этой статье будет подробно разобран механизм таймера в этой книге. Если вам это нравится, вы можете поставить лайк / подписаться и поддержать его. Я надеюсь, что вы сможете прочитать эту статью. Получите что-то .

Личный блог, чтобы узнать:obkoro1.com

Подготовить

Перед прочтением этой статьи рекомендуется прочитатьМеханизм цикла событий Js (Event Loop) и объяснение примераЭта статья предназначена для того, чтобы понять, что происходит за кулисами, и не будет подробно объяснять механизм цикла событий.

Проблема, решаемая таймером:

Из-за однопоточной природы JS таймеры предоставляют способ обойти ограничение однопоточности, то есть позволить части кода выполняться асинхронно через определенную миллисекунду.

Чтобы установить и очистить таймер:

Цитирование изображения непосредственно из читов Ninja:

Уведомление:

  1. Интервал таймера установлен на 0, а также будет задержка в несколько миллисекунд.
  2. В использованииsetTimeoutа такжеsetIntervalКогда лучше присвоить его переменной, чтобы отменить таймер.
  3. В использованииVueкогда,setTimeoutа такжеsetIntervalЭто указывает на объект окна, а данные и методы компонента недоступны.
  4. В использованииVueКогда маршрутный переход не уничтоженsetInterval, но компонент уже уничтожен, что и вызывает проблему.
  5. в потоке выполненияsetTimeout/setIntervalНет гарантии, что функция обратного вызова будет выполнена вовремя.
  6. setIntervalзвонки могут быть устаревшими иsetIntervalнепрерывное выполнение

Решения третьего и четвертого пунктов могут относиться к тому, что я писал ранееНесколько проблем в процессе практики Vue.

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

Выполнение таймера в потоке выполнения

Давайте посмотрим на каштаны в читах ниндзя:

Давайте посмотрим, что здесь происходит:

  1. Во-первых, в 0 миллисекунд есть блок кода js, выполнение которого длится 18 миллисекунд.
  2. Затем установите два таймера с задержкой 10 миллисекунд на 0 миллисекунд,setTimeoutтак же какsetInterval,setTimeoutСначала установите.
  3. На 6-й миллисекунде происходит событие щелчка мышью.

События поставлены в очередь.

Так много вещей происходит одновременно из-за однопоточной природы js,Когда поток выполняется и запускается асинхронное событие, оно будет поставлено в очередь и выполнено, когда поток простаивает..

    这里的异步事件包括：鼠标单击，定时器触发，ajax请求、promise等事件。

Вернемся к каштану:

В кашнете есть код кодового блока 18 миллисекунд, который должен быть выполнен в первую очередь, и только этот блок кода можно выполнить в течение этих 18 миллисекунд.После запуска других событий их можно только поставить в очередь на выполнение..

Пока блок кода все еще выполняется, на 6-й миллисекунде происходит событие щелчка мыши, а на 10-й миллисекунде происходит событие щелчка мыши.setTimeoutа такжеsetIntervalДва обработчика, эти три события не могут быть выполнены сразу, нодобавляется в очередь, ожидающую выполнениясередина.

Первый пришел, первый ушел (первый пришел, первый вышел)

В 18 мс блок кода завершает выполнение, и три задачи ставятся в очередь на выполнение.Принцип «первым пришел – первым вышел», в это время событие клика будет выполняться первым,setTimeoutа такжеsetIntervalбудет по-прежнему стоять в очереди на выполнение.

вызов setInterval устарел

При выполнении события клика первые 20 миллисекунд, вторыеsetIntervalОн также истек, потому что в это время событие клика заняло поток, поэтомуsetIntervalдо сих пор не может быть выполнено, и поскольку в настоящее времяВ очереди уже естьsetIntervalставится в очередь на выполнение, поэтому на этот разsetIntervalбудет устаревшим.

Браузер не будет добавлять один и тот же обработчик setInterval в очередь ожидания несколько раз.

setTimeout/setIntervalНет гарантии, что функция обратного вызова будет выполнена вовремя

Событие щелчка завершает выполнение на 28-й миллисекунде с двумя задачами (setTimeoutа такжеsetInterval) ожидает выполнения в соответствии с принципом «первым пришел — первым вышел».setTimeoutРаньше чемsetIntervalустановить, поэтому выполнить сначалаsetTimeout.

so:Что мы ожидаем выполнить на 10-й миллисекундеsetTimeoutОбработчик в конечном итоге начнет выполняться на 28-й миллисекунде., о котором сказано вышеsetTimeout/setIntervalНет гарантии, что функция обратного вызова будет выполнена вовремя.

В 30 мс,setIntervalСрабатывает снова, потому что в очереди уже естьsetIntervalВ очереди, поэтому этот триггер снова недействителен.

Непрерывное выполнение setInterval

setTimeoutВыполнение завершается через 36 мс.setIntervalОбработчик начинает выполняться,setIntervalВыполнение занимает 6 миллисекунд.

на 40-й миллисекундеsetIntervalзапустить снова, потому что на этот разПредыдущийsetIntervalВо время выполнения в очереди нет очередиsetIntervalВ очереди на этот раз триггерsetIntervalбудет ждать в очереди.

так:setIntervalВремя обработки не может быть больше установленного интервала, иначеsetIntervalПовторное исполнение не будет промежуточным

На 42-й миллисекунде,ПервыйsetIntervalконец, затем очередьsetIntervalначать выполнение немедленно, завершает выполнение за 48 миллисекунд. Затем он снова срабатывает через 50 миллисекунд.setInterval, в это время в очереди нет задач, и они будут выполнены немедленно.

setTimeout периодически запускает таймер через определенный интервал.

Сказано выше,setIntervalВремя обработки не может быть больше установленного интервала, иначеsetIntervalбудет повторяться без интервала.

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

    // 实际上我不止在忍者秘籍中见过，在很多地方都见过这种技术。
    setTimeout(function repeatMe(){
      // do something
      setTimeout(repeatMe,10); 
      // 执行完处理程序的内容后，在末尾再间隔10毫秒来调用该程序，这样就能保证一定是10毫秒的周期调用
    },10)

Дополнительные знания о таймерах в Ninja Читы:

  • Таймер не может очень точно контролировать время выполнения, и в книге рекомендуется более 15 мс.
  • Таймеры можно использовать для разбивки длительных задач, здесь вы можете сами погуглить.

Является ли очередь задач такой же простой, как и очередь?

На самом деле очередь задач — это не просто очередь, в читах ниндзя упоминается, что это понятие используется для удобства, и если вы хотите иметь более четкое представление о механизме, стоящем за ним, рекомендуется прочитать его еще раз:Механизм цикла событий Js (Event Loop) и объяснение примера,

Эпилог

Все вышеперечисленное вызвано однопоточной особенностью js, поэтому будет очередь событий, первый пришел первый обслуженный, вызовы setInterval отброшены, таймеры не могут гарантировать пунктуальное выполнение функций обратного вызова, и происходит непрерывное выполнение setInterval, всегда помните об этой особенности, многие проблемы, связанные с порядком выполнения событий, можно выяснить и найти решения.

Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.

личный блог and Персональная домашняя страница Nuggets, если вам нужно перепечатать, пожалуйста, поставьте ссылку на исходный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки.

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

Выше 2018.6.17

Использованная литература:

JS Ninja Cheats Глава 8: Укрощение потоков и таймеров

Категории