Асинхронность в JavaScript. setTimeout и setInterval
В JavaScript имеются методы, которые позволяют вызвать функцию не сразу, а через некоторый промежуток времени (в асинхронном режиме). Называются они setTimeout и setInterval .
Отличаются они друг от друга лишь тем, что setTimeout выполняет вызов функции всего один раз, а setInterval – постоянно через указанный интервал времени.
Синтаксис setTimeout и setInterval :
// setTimeout window.setTimeout(func [, delay] [, arg1, arg2, . ]); // setInterval window.setTimeout(func [, delay] [, arg1, arg2, . ]);- func – функция, которую нужно вызвать спустя указанное в delay количество миллисекунд;
- delay – количество миллисекунд по истечении которых нужно выполнить func ;
- arg1, arg2, . – дополнительные аргументы, которые нужно передать в func .
Например, вызовем функцию myFunc один раз по прошествии 3 секунд:
// функция function myFunc() { console.log('after 3 seconds'); } // вызовем функцию myFunc после 3 секунд window.setTimeout(myFunc, 3000); // выведем сообщение в консоль console.log('immediately');При выполнение этого кода программа не остановится на месте, где мы зарегистрировали некоторую асинхронность посредством setTimeout и не будет блокировать её дальнейшее выполнение на 3 секунды, через которые нужно будет вызвать myFunc . Выполнение скрипта продолжится дальше и сначала браузер выведет в консоль сообщение «immediately», а затем через 3 секунды – «after 3 seconds».
Другими словами, когда браузер доходит до исполнения setTimeout , он как бы помещает функцию myFunc в некоторое место, а затем по прошествии определённого количества времени её вызывает. При этом блокировка основного потока выполнения программы не происходит.
Чтобы более подробно разобраться в этом необходимо рассмотреть, как движок JavaScript выполняет синхронный и асинхронный код , а также что такое event loop и как он работает .
Синхронный и асинхронный код
Но перед тем, как переходить к асинхронными операциям, следует сначала в общих чертах разобраться как выполняется синхронный код .
Выполнение такого кода движок JavaScript выполняет последовательно (т.е. строчку за строчкой). При этом перед тем, как выполнить какую-то строчку кода интерпретатор сначала помещает её в стек вызовов ( call stack ). Именно в нём происходит её разбор и исполнение. После этого происходит её извлечение из стека и переход к следующей строчке.
Но всё меняется, когда интерпретатор доходит до выполнения асинхронных операций, например setTimeout . Они также как и синхронные операции сначала попадают в стек вызовов, где происходит их разбор. Но, при разборе интерпретатор понимает, что это некоторый вызов Web API и помещает эту операцию в него. После этого он удаляет эту строчку из call stack и переходит к выполнению следующей строчки кода.
В это же время Web API регистрирует эту функцию и запускает таймер. Как только он завершается, он помещает эту функцию в очередь (callback queue). Очередь – это структура данных типа FIFO. Она хранит все функции в том порядке, в котором они были туда добавлены.
Очередь обратных вызовов (callback queue) обрабатывает цикл событий (event loop). Он смотрит на эту очередь и на стек вызовов (call stack). Если стек вызовов пуст, а очередь нет – то он берёт первую функцию из очереди и закидывает её в стек вызовов, в котором она уже выполняется. Вот таким образом происходит выполнения асинхронного кода в JavaScript.
Если функцию myFunc необходимо вызывать не один раз, а постоянно через каждые 3 секунды, то тогда вместо setTimeout следует использовать setInterval :
window.setInterval(myFunc, 3000);Пример, с передачей функции аргументов:
function sayHello(name) { alert(`Привет, ${name}!`); } setTimeout(sayHello, 3000, 'Василий'); // Привет, Василий!Пример, с использованием в setTimeout анонимной функции:
setTimeout(function (name) { alert(`Привет, ${name}!`); }, 3000, 'Василий');В setTimeout и setInterval можно также вместо функции передавать строку с кодом, который нужно выполнить через определённый интервал времени. Но этот вариант использовать не рекомендуется по тем же причинам, что и функцию eval .
Если функция setTimeout по каким-то причинам не работает, то проверьте действительно ли вы передаёте ссылку на функцию, а неё результат:
function sayHello() { console.log('Привет!'); } // передаём в setTimeout не ссылку на функцию sayHello, а результат её вызова setTimeout(sayHello(), 3000);Отмена таймаута (clearTimeout)
Метод setTimeout в результате своего вызова возвращает нам некий идентификатор таймера, который затем мы можем использовать для его отмены.
Синтаксис отмены таймаута:
const timeoutId = window.setTimeout(. ); window.clearTimeout(timeoutId);Данный метод ( clearTimeout ) содержит один обязательный параметр — это уникальный идентификатор ( timeoutId ) таймера, который можно получить как результат вызова метода setTimeout .
// запустим таймер и получим его идентификатор, который будет храниться в timeoutId const timeoutId = window.setTimeout(() => { // он выведет alert с контентом 'Сообщение' через 4 секунды alert('Сообщение'); }, 4000); // остановим таймер с помощью метода clearTimeout (для этого необходимо в качестве параметра данному методу передать идентификатор таймера, хранящийся в timeoutId) clearTimeout(timeoutId);
Пример
Например, создадим на странице 2 ссылки. При нажатии на первую будет запускать функцию start . Данная функция будет выводить в элемент .seconds количество секунд, прошедших с момента её нажатия. При нажатии на ссылку «Остановить таймер» будем запускать другую функцию stop . Она будет прекращать работу таймера с помощью метода clearTimeout .
Задача. Перепишите этот пример с использованием методов setInterval и clearInterval .
Методы setInterval и clearInterval
Метод setInterval предназначен для вызова кода на языке JavaScript через указанные промежутки времени. Он в отличие от метода setTimeOut будет вызвать код до тех пор, пока Вы не остановите этот таймер.
window.setInterval(Параметр_1, Параметр_2);Метод setInterval имеет два обязательных параметра:
- 1 параметр представляет собой строку, содержащую код на языке JavaScript (например, вызов функции);
- 2 параметр задаёт интервал времени в миллисекундах, через который данный код будет вызываться.
Для прекращения работы данного таймера предназначен метод clearInterval , которому в качестве параметра необходимо передать уникальный идентификатор ( id ) таймера. Этот идентификатор можно получить при установке таймера, т.е. его возвращает метод setInterval . Также таймер прекращает свою работу при закрытии окна.
//запустим таймер и получим его идентификатор, который будет храниться в переменной timer1 //данный таймер будет выводить сообщение через каждые 5 секунд var timer1 = window.setInterval("alert('Сообщение');",5000); //остановим работу таймера с помощью метода clearInterval(). //Для этого в качестве параметра данному методу передадим идентификатор таймера, хранящийся в переменной timer1. clearInterval(timer1);Например, создадим цифровые часы:
3anycтить таймер
Остановить таймер set Interval ( )
Регулярно запускает функцию через указанный промежуток времени.
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
set Interval ( ) позволяет регулярно исполнять функцию через указанный промежуток времени.
Пример
Скопировать ссылку «Пример» Скопировано
Раз в секунду напечатать текст в консоль:
const intervalId = setInterval(function() console.log('Я выполняюсь каждую секунду')>, 1000)const intervalId = setInterval(function() console.log('Я выполняюсь каждую секунду') >, 1000)
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Функция set Interval ( ) принимает два аргумента:
- функцию, которая будет регулярно выполняться при истечении таймера;
- время в миллисекундах между запусками функции.
Миллисекунда – это одна тысячная доля секунды. Одна секунда состоит из 1000 миллисекунд.
Возвращает идентификатор установленного таймера. Индикатор передаётся в функцию clear Interval , чтобы остановить регулярное выполнение функции.
Есть вариант вызова set Interval ( ) с произвольным количеством аргументов. Тогда все аргументы после второго будут передаваться в выполняемую функцию:
setInterval(function(name, age) console.log(`Раз в секунду печатаю имя «$» и $`)>, 1000, 'Ivan', 33) // Раз в секунду печатаю имя «Иван» и 33setInterval(function(name, age) console.log(`Раз в секунду печатаю имя «$name>» и $age>`) >, 1000, 'Ivan', 33) // Раз в секунду печатаю имя «Иван» и 33
Этот вариант вызова используется редко.
Как понять
Скопировать ссылку «Как понять» Скопировано
В JavaScript код выполняется по порядку сверху вниз. Если интерпретатор встречает вызов функции, то он сразу выполняет её. Но разработчику может понадобится запланировать вызов функции, чтобы она выполнилась регулярно через заданные промежутки времени. Например, чтобы регулярно проверять обновления данных на сервере.
Запланировать регулярное выполнение функции по расписанию можно с помощью set Interval ( ) . Выполнение set Interval ( ) создаёт активный таймер в окружении браузера. Таймеры имеют числовой идентификатор, он хранится в браузере в списке активных таймеров. Этот идентификатор нужно использовать, чтобы остановить регулярное выполнение функции.
Время между запусками
Скопировать ссылку «Время между запусками» Скопировано
Указанное вторым аргументом число в миллисекундах обозначает время между запусками функции. При этом не учитывается время работы самой функции.
let i = 1setInterval(function print() console.log(i) i++>, 1000)let i = 1 setInterval(function print() console.log(i) i++ >, 1000)
Если функция выполняется долго, то может сложиться ситуация, когда следующая функция вызывается сразу после завершения текущей, потому что указанное время вышло.
На практике
Скопировать ссылку «На практике» Скопировано
Николай Лопин советует
Скопировать ссылку «Николай Лопин советует» Скопировано
🛠 Нужно быть абсолютно уверенным, что выполняемая функция отрабатывает быстрее, чем указанный таймер.
set Interval ( ) не гарантирует точный запуск по таймеру, но гарантирует, что предыдущая функция завершила свою работу. Если функция работает дольше указанного времени, то вызовы станут идти один за другим без пауз.
🛠 Если необходимо выжидать время не между запусками функций, как в set Interval ( ) , а между завершениями, то этого можно достичь цепочкой вызовов set Timeout ( ) :
let timerId; timerId = setTimeout(function work() console.log('я выполняюсь через секунду после предыдущей') timerId = setTimeout(work, 1000)>, 1000)let timerId; timerId = setTimeout(function work() console.log('я выполняюсь через секунду после предыдущей') timerId = setTimeout(work, 1000) >, 1000)
Схема работы такого кода будет выглядеть иначе: