Как остановить settimeout javascript
Перейти к содержимому

Как остановить settimeout javascript

  • автор:

Как остановить settimeout javascript

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

Форма записи

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

const timerId = setTimeout(() => < console.log('Код, который будет выполнен через 5 секунд'); >, 5000); clearTimeout(timerId);

В этом примере код, переданный в качестве аргумента функции setTimeout(), будет выполнен через 5 секунд. Однако, функция clearTimeout() остановит выполнение этого кода до того, как он будет запущен.

Описание работы

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

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

Заключение

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

Как отменить settimeout в js

Для отметы setTimeout() есть специальная функция clearTimeout() . Она принимает на вход идентификатор таймаута, который возвращает setTimeout() и останавливает таймер (переданный колбэк не выполнится).

// запускаем таймер const timerId = setTimeout(() => console.log('hello!'), 1000); // останавливаем таймер clearTimeout(timerId); 

Не смотря на то, что есть ещё функция clearInterval() , которая тоже может остановить таймер точно таким же образом, всё же лучше использовать для остановки таймера именно clearTimeout() , т.к. именно эта функция предназначена для остановки таймера.

Как остановить settimeout javascript

Для выполнения действий через определенные промежутки времени в объекте window предусмотрены функции таймеров. Есть два типа таймеров: одни выполняются только один раз, а другие постоянно через промежуток времени.

Функция setTimeout

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

const timerId = setTimeout(someFunction, period)

Параметр period указывает на период в миллисекундах, через который будет выполняться функция из параметра someFunction . А в качестве результата функция возвращает id таймера.

function printMessage() < console.log("Hello METANIT.COM");>setTimeout(printMessage, 5000);

В данном случае через 5 секунд после загрузки страницы произойдет срабатывание функции printMessage .

Для остановки таймера применяется функция clearTimeout() , в которую передается id таймера:

function printMessage() < console.log("Hello METANIT.COM");>const timerId = setTimeout(printMessage, 5000); clearTimeout(timerId);

Функция setInterval

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

Например, напишем небольшую программу для вывода текущего времени:

    METANIT.COM      

Здесь через каждую секунду (1000 миллисекунд) вызывается функция updateTime() , которая обновляет содержимое поля , устанавливая в качестве его текста текущее вемя.

requestAnimationFrame()

Метод requestAnimationFrame() действует аналогично setInterval() за тем исключением, что он больше заточен под анимации, работу с графикой и имеет ряд оптимизаций, которые улучшают его производительность.

     #rect     

В метод window.requestAnimationFrame() передается функция, которая будет вызываться определенное количество раз (обычно 60) в секунду. В данном случае в этот метод передается функция moveRect, которая изменяет угол поворота блока на странице и затем обращается опять же к методу window.requestAnimationFrame(moveRect) .

В качестве возвращаемого результата метод window.requestAnimationFrame() возвращает уникальный id, который может потом использоваться для остановки анимации:

// получаем id const останавливаем анимацию window.cancelAnimationFrame(id);

set Timeout ( )

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

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

Открыть/закрыть навигацию по статье

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

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

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

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

Миллисекунда – это одна тысячная доля секунды, то есть одна секунда состоит из 1000 миллисекунд.

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

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

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

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

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

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

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

На практике

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

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

Скопировать ссылку «Егор Огарков советует» Скопировано

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

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

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

  • ‘Я второй!’
  • ‘Я первый!’

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *