setTimeout()

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(() => {  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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать