/ ↲
    Расширенный поиск

    JavaScript

    clearTimeout()

    Отменяет регулярное выполнение функции, установленное вызовом setTimeout().

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

    Кратко

    Скопировано

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

    Как пишется

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

clearTimeout(timerId)

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

    Как понять

    Скопировано

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

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

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

    На практике

    Скопировано

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

    Скопировано

    🛠 Связку 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)
})

    Читайте также