setTimeout()

Отложенный вызов функции. Вызывает функцию через указанный промежуток времени.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Как пишется

Скопировано
        
          
          const timerId = setTimeout(() => {  console.log('Прошла 1 секунда')}, 1000)console.log(timerId)// Выведет число
          const timerId = setTimeout(() => {
  console.log('Прошла 1 секунда')
}, 1000)

console.log(timerId)
// Выведет число

        
        
          
        
      

Пример выше установит таймер в 1 секунду и по истечении этого времени сработает функция, которая выведет в консоль сообщение.

setTimeout() принимает два аргумента:

  • функция, которая выполнится, когда таймер закончится;
  • время таймера в миллисекундах.

В результате вызова setTimeout() вернёт идентификатор установленного таймера.

Есть вариант вызова setTimeout() с произвольным количеством аргументов. Тогда все аргументы после второго будут передаваться в выполняемую функцию:

        
          
          setTimeout(function(greeting) {  console.log(`Через секунду напечатаю «${greeting}»`)}, 1000, 'Привет')
          setTimeout(function(greeting) {
  console.log(`Через секунду напечатаю «${greeting}»`)
}, 1000, 'Привет')

        
        
          
        
      

Этот вариант вызова используется редко.

Как понять

Скопировано

В JavaScript код выполняется по порядку сверху вниз. Если интерпретатор встречает вызов функции, то он сразу выполняет её. Но разработчику часто может понадобиться запланировать вызов функции, чтобы она выполнилась не сразу.

Запланировать одноразовое выполнение функции можно как раз с помощью setTimeout(). Это самый простой способ исполнить функцию асинхронно.

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

Открыть демо в новой вкладке

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

Таймауты часто применяются для выпадающих списков или тултипов, чтобы закрывать их с небольшой задержкой. Только с помощью таймаутов можно создать такую полезную функцию как debounce().

На практике

Скопировано

Егор Огарков советует

Скопировано

🛠 Функция переданная в setTimeout() всегда будет вызвана только после выполнения синхронного кода, даже если выставить таймер в 0. Дело в том, что такая функция сразу попадает в асинхронную очередь вне зависимости от значения таймера.

        
          
          setTimeout(() => {  console.log('Я первый!')}, 0)// таймер равен 0console.log('Я второй!')
          setTimeout(() => {
  console.log('Я первый!')
}, 0)
// таймер равен 0

console.log('Я второй!')

        
        
          
        
      

В консоль сообщения выведется в следующем порядке:

  • 'Я второй!'
  • 'Я первый!'

🛠 Время таймера нельзя изменить динамически

        
          
          // Изначально 1 секундаlet time = 1000setTimeout(() => {  console.log('Я сработал')}, time)// Поставили время 2 секундыtime = 2000
          // Изначально 1 секунда
let time = 1000

setTimeout(() => {
  console.log('Я сработал')
}, time)

// Поставили время 2 секунды
time = 2000

        
        
          
        
      

Функция всё равно вызовется через секунду. Если возникла необходимость изменить время, то придётся сначала очистить предыдущий таймер и установить новый.