Иногда возникает необходимость задержать выполнение кода. Например, сделать так, чтобы отдельные строки выполнялись в какой-то определенный момент, а не синхронно со всем остальным кодом.
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()».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
