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

0
2486
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

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

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(function() {
    // код функции
}, time);

Также стоит отметить, что 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() {
  console.log("freeCodeCamp");
}

Код 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(`${phrase}, my name is ${name}` );
}

setTimeout(greeting, 3000,"Hello world","John Doe");

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

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

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

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

clearTimeout(timeoutID)

Работает это так. Вы должны сохранить 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() {
  console.log("freeCodeCamp");
}

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

Заключение

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

Перевод статьи «JavaScript Wait – How to Sleep N Seconds in JS with .setTimeout()».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here