Time out in javascript

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    Скопировать Скопировано Не удалось скопировать   

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

Источник

Window setTimeout()

Use clearTimeout(myTimeout) to prevent myGreeting from running:

const myTimeout = setTimeout(myGreeting, 5000);

function myStopFunction() clearTimeout(myTimeout);
>

Description

The setTimeout() method calls a function after a number of milliseconds.

1 second = 1000 milliseconds.

Notes

The setTimeout() is executed only once.

If you need repeated executions, use setInterval() instead.

Use the clearTimeout() method to prevent the function from starting.

To clear a timeout, use the id returned from setTimeout():

Then you can to stop the execution by calling clearTimeout():

See Also:

Syntax

Parameters

Parameter	Description
function	Required. The function to execute.
milliseconds	Optional. Number of milliseconds to wait before executing. Default value is 0.
param1, param2, .	Optional. Parameters to pass to the function. Not supported in IE9 and earlier.

Return Value

More Examples

Display an alert box after 3 seconds (3000 milliseconds):

function myFunction() timeout = setTimeout(alertFunc, 3000);
>

let x = document.getElementById(«txt»);
setTimeout(function()< x.value = "2 seconds" >, 2000);
setTimeout(function()< x.value = "4 seconds" >, 4000);
setTimeout(function()< x.value = "6 seconds" >, 6000);

Open a new window and close the window after three seconds (3000 milliseconds):

Count forever — but with the ability to stop the count:

A clock created with timing events:

function startTime() <
const date = new Date();
document.getElementById(«txt»).innerHTML = date.toLocaleTimeString();
setTimeout(function() , 1000);
>

Pass parameters to the function (does not work in IE9 and earlier):

However, if you use an anonymous function, it will work in all browsers:

Browser Support

setTimeout() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Метод setTimeout() — задержка выполнения в JavaScript

Иногда возникает необходимость задержать выполнение кода. Например, сделать так, чтобы отдельные строки выполнялись в какой-то определенный момент, а не синхронно со всем остальным кодом.

В этой статье мы познакомимся с методом setTimeout() и разберемся, как его использовать в своих программах.

Что собой представляет метод setTimeout() в JavaScript?

setTimeout() — асинхронный метод объекта window. Его роль — установка таймера для выполнения действия. Таймер определяет конкретный момент, который будет триггером для запуска этого действия.

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

Синтаксис метода setTimeout()

Общий синтаксис метода setTimeout() выглядит так:

setTimeout(function_name, time);

Давайте разберем каждый элемент.

setTimeout() — метод, используемый для создания отложенных событий. Он принимает два обязательных параметра:

• function_name — имя функции обратного вызова, код которой должен быть выполнен. Имя функции работает как ссылка и указатель на определение функции, содержащей собственно блок кода.
• time — время, на которое программа должна отложить выполнение функции. Задается в миллисекундах (1 секунда = 1000 миллисекунд).

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

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

Также стоит отметить, что setTimeout() возвращает timeoutID — положительное число, определяющее таймер, созданный setTimeout(). В конце статьи мы разберем, как использовать значение timeoutID с методом clearTimeout().

Как установить задержку выполнения кода в N секунд в JavaScript

Давайте рассмотрим пример использования setTimeout().

// этот код выполняется первым console.log(«Where can I learn to code for free and get a developer job?»); // эта строка указывает, что определение функции будет выполнено по истечении 3 с setTimeout(codingCourse, 3000); // определение функции function codingCourse()

Код JavaScript выполняется сверху вниз.

Первая строка кода, console.log(«Where can I learn to code for free and get a developer job?»); , выполняется сразу после нажатия Run.

Вторая строка кода указывает, что должна быть задержка выполнения функции codingCourse() в 3000 мс (или 3 с).

Как только 3000 мс истекут, вы увидите, что код внутри функции ( console.log(«freeCodeCamp») ) успешно выполняется.

Давайте рассмотрим другой пример.

console.log("Good Morning!"); setTimeout(function() < console.log("Good Night!"); >, 1000); console.log("Good Afternoon!");

Здесь первая строка кода, console.log(«Good Morning!»); , выполняется сразу.

Строка console.log(«Good Afternoon!»); тоже выполняется сразу, несмотря на то, что это последняя строка в файле.

Код setTimeout() задает задержку в 1 секунду перед выполнением. Но в течение этого времени остальная часть кода выполняется в обычном режиме. В результате выполнение указанной строки откладывается, а вместо нее выполняется строка console.log(«Good Afternoon!»); .

Когда секунда проходит, запускается код в setTimeout().

Вы также можете передать в setTimeout() опциональные параметры.

В следующем примере функция greeting принимает два аргумента, phrase и name. Они передаются в метод setTimeout(), который задает задержку в 3 секунды перед вызовом функции.

function greeting(phrase,name) < console.log(`$, my name is $` ); > setTimeout(greeting, 3000,"Hello world","John Doe");

Как использовать метод clearTimeout() в JavaScript

Что, если вы хотите отменить уже созданное отложенное событие?

Вы можете остановить выполнение кода в setTimeout() при помощи метода clearTimeout(). Вот здесь нам и пригодится timeoutID, о котором мы упоминали ранее.

Общий синтаксис метода clearTimeout() следующий:

Работает это так. Вы должны сохранить timeoutID, который возвращается при каждом вызове setTimeout(), в переменную.

Затем timeoutID используется как параметр для clearTimeout():

let timeoutID = setTimeout(function()< console.log("Good Night"); >, 2000); clearTimeout(timeoutID); console.log("Good Morning!");

Теперь код в setTimeout() не будет выполнен.

В чем разница между setTimeout и setInterval ?

Методы setTimeout() и setInterval() имеют очень похожий синтаксис.

Вот синтаксис setInterval():

setInterval(function_name, time);

Но эти методы не взаимозаменяемы, работают они по-разному.

setTimeout() запускает действие один раз, а вот setInterval() — периодически.

В следующем примере функция codingCourse вызывается каждые три секунды:

console.log(«Where can I learn to code for free and get a developer job?»); setInterval(codingCourse, 3000); // определение функции function codingCourse()

setInterval() — хороший выбор для случаев, когда какое-то действие нужно повторять регулярно.

Заключение

Вот и все! Мы познакомились с тем, как работает метод setTimeout(), и узнали, как задавать задержку выполнения кода в JavaScript.

Источник