`clearTimeout()`

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

Кратко

clearTimeout очищает таймаут установленный с помощью setTimeout.

Как пишется

        
          
          const timerId = setTimeout(() => {  console.log('Прошла секунда')}, 1000)clearTimeout(timerId)
          const timerId = setTimeout(() => {
  console.log('Прошла секунда')
}, 1000)

clearTimeout(timerId)

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

Как понять

Не всегда бывает необходимо чтобы отложенный вызов обязательно сработал. clearTimeout прерывает таймер и установленная функция уже не вызовется.

Когда устанавливается таймер, браузер записывает этот идентификатор в свой список активных таймеров. При очищении браузер найдёт таймер по его идентификатору и уберёт из списка.

Мы рекомендуем всегда подчищать таймеры, если они больше не нужны. Даже если в самой функции стоят необходимые проверки и её вызов не вызовет неожиданных последствий.

На практике

windrushfarer

🛠 Связку setTimeout и clearTimeout часто можно увидеть во время реализации всплывающей подсказки. Ниже я приведу базовый пример такой функциональности. Этот код можно использовать как стартовый шаблон для ваших наработок.

Создадим HTML-разметку, в которой будет кнопка и скрытая подсказка к этой кнопке.

        
          
          <button>Наведи на меня</button><div hidden>Подсказка к кнопке</div>
          <button>Наведи на меня</button>
<div hidden>Подсказка к кнопке</div>

Подсказка будет появляться сразу при наведении мыши на кнопку. Но если убрать курсор с кнопки, то подсказка исчезнет только через секунду.

        
          
          const trigger = document.querySelector('button')const hint = document.querySelector('div')let hideTimeoutId = nulltrigger.addEventListener('mouseenter', () => {  clearTimeout(hideTimeoutId)  hint.hidden = false})trigger.addEventListener('mouseleave', () => {  hideTimeoutId = setTimeout(() => {    hint.hidden = true  }, 1000)})
          const trigger = document.querySelector('button')
const hint = document.querySelector('div')

let hideTimeoutId = null

trigger.addEventListener('mouseenter', () => {
  clearTimeout(hideTimeoutId)
  hint.hidden = false
})

trigger.addEventListener('mouseleave', () => {
  hideTimeoutId = setTimeout(() => {
    hint.hidden = true
  }, 1000)
})