Этот курс продолжает обучение тех, кто уже изучил основы JavaScript. На очереди не самые простые вещи: прототипы, конструкторы, асинхронный код, Node.js и DOM. По окончании обучения вы будете уметь программировать на JavaScript. Авторы курса — разработчики из Яндекса.
Системные таймеры
Loading...
來自 Moscow Institute of Physics and Technology 的課程
JavaScript, часть 2: прототипы и асинхронность
41 個評分
Moscow Institute of Physics and Technology
41 個評分
課程 4（共 5 門，Specialization Разработка интерфейсов: вёрстка и JavaScript）
從本節課中
Асинхронный код
與講師見面
Конев Антонразработчик интерфейсов, Яндекс
Сергей Жигаловразработчик интерфейсов, Яндекс
Чистяков Денисруководитель службы разработки, Яндекс
В этом видео мы рассмотрим с вами способ,
которым можно добавить функцию в очередь событий при помощи системного таймера.
В JavaScript'е есть несколько видов системных таймеров,
первый из них — это setTimeout.
Сигнатура этого метода следующая.
Первым аргументом setTimeout принимает функцию, которая будет вызвана
через delay миллисекунд, который указывается вторым параметром.
Третий параметр и все остальные — это аргументы,
с которыми будет вызвана функция.
В качестве первого аргумента func можно передать также строчку.
Эта строка будет проинтерпретирована, однако я не рекомендую вам использовать
этот вариант, поскольку он устарел и остается для обратной совместимости.
Давайте разберем, как работает setTimeout на следующем примере.
Объявим две функции fromStove и toStove,
которые ставят и снимают кофе с плиты соответственно.
Для того чтобы не забыть вовремя снять кофе с плиты, мы заводим системный таймер
на 5000 миллисекунд, или на 5 секунд, который вызовет функцию fromStove за нас.
Работает это все следующим образом.
Когда интерпретатор начинает выполнять наш код,
он помещает анонимную функцию в очередь событий.
В данном случае стек событий будет пустой,
поэтому анонимная функция пропадает из очереди событий и попадает в стек.
Мы начинаем выполнять эту функцию и вызываем функцию toStove,
которая ставит кофе на плиту, то есть возвращает нам соответствующую строку.
Затем следующим шагом мы вызываем функцию setTimeout и передаем туда
два аргумента: callback fromStove, который снимает кофе с плиты, и время,
через которое нужно позвать этот callback.
В нашем случае это 5 секунд.
Интерпретатор запоминает, что нужно завести системный
таймер — на слайдах я буду помечать это будильничком — и запускает отсчет.
В нашем случае прошло 0 секунд.
Через 5 секунд интерпретатор поймет, что нужно вызвать системный таймер,
и кладет callback fromStove в очередь событий.
При этом знание о том, что нужно завести системный таймер,
из интерпретатора пропадает.
Если стек событий при этом пустой,
то функция fromStove пропадает из очереди событий и попадает в стек,
выполняется и возвращает строчку 'Снять с плиты'.
Еще один метод для работы с системными таймерами — это setInterval.
Так же, как и setTimeout, интервал принимает следующие аргументы: функцию
callback, которую мы будем вызывать через delay миллисекунд, которая указывается во
втором параметре, и набор аргументов, с которыми нужно вызвать callback.
Но, в отличие от setTimeout, setInterval будет вызывать функцию не один раз,
а много раз до тех пор, пока его не остановят.
Давайте рассмотрим, как работает setInterval на следующем примере.
Объявим две функции toStove, которая ставит кофе на плиту, и toStir,
которая помешивает кофе.
И для того чтобы не забыть помешивать кофе,
мы заводим системный таймер — setInterval.
Передаем туда два аргумента: callback, который нужно вызвать — toStir, и время,
через которое нужно вызывать этот callback — 100 миллисекунд или 1 секунда.
Работает это все следующим образом.
Интерпретатор начинает выполнять наш код, кладет анонимную функцию в очередь,
которая помещается в стек вызовов, выполняется и вызывает функцию toStove.
Возвращает нам строку 'Поставить на плиту' и передает выполнение дальше.
Далее мы вызываем функцию setInterval, которая заводит системный таймер.
Системный таймер будет срабатывать каждую секунду, поэтому, после того
как пройдет одна секунда, в очереди событий окажется callback — toStir.
Если стек вызовов при этом пустой,
то мы сразу выполним эту функцию и получим результат.
Через две секунды также выполнится системный таймер и снова
положит функцию toStir в очередь событий.
Аналогичные действия произойдут через 3 секунды — функция toStir
окажется в очереди событий, через 4 секунды и так далее,
пока наш системный таймер не остановит.
Для того чтобы остановить системный таймер,
мы воспользуемся парным к нему методом — в данном случае методом clearInterval.
Этот метод принимает на вход некоторый идентификатор — это результат вызова
метода setInterval.
В большинстве случаев id — это число, однако я не рекомендую вам завязываться
на том, что это число, поскольку в документации нигде явно этого не сказано.
После вызова функции clearInterval из памяти интерпретатора
пропадет знание о том, что нужно вызывать функцию toStir.
Таким образом, системный таймер очистится.
В этом видео мы рассмотрели с вами два системных таймера: setTimeout
и setInterval, а также поговорили о том, как очищать системные таймеры.
