setTimeout()

Поддержка браузерами


4.0+	4.0+	1.0+	1.0+	4.0+	1.0+

Описание

Функция setTimeout() вызывает функцию или выполняет переданный код после указанной задержки.

Примечание: данная функция вызывается на исполнение только один раз, если необходимо повторение выполнения действий через определённый промежуток времени воспользуйтесь функцией setInterval().

setTimeout() в циклах

Некоторые новички в JavaScript пытаются использовать метод setTimeout() в циклах для анимации. Однако никакой анимации в итоге не получают и вот почему. Метод setTimeout() вызывает указанную функцию только один раз: он регистрирует функцию, которая должна быть вызвана через указанное количество миллисекунд, когда указанная задержка истечёт, функция будет вызвана. Поместив метод setTimeout() в тело цикла, при каждой итерации будет зарегистрирован вызов функции через указанный промежуток времени, но так как цикл отрабатывает итерации слишком быстро, то все вызовы регистрируются практически в одно время и создаётся ощущение, что метод setTimeout() отработал всего один раз, а не указанное количество.

Если хочется создать анимацию, то для этой цели необходимо использовать метод setInterval().

Синтаксис

timeoutID = setTimeout(func[, delay, param1, param2, ...]);
timeoutID = setTimeout(code[, delay]);

Аргументы

func: Имя функции, которая будет вызвана после указанной задержки.
code: Строка, содержащая JavaScript-код, который будет выполнен после указанной задержки.
delay: Задержка, указываемая в миллисекундах, по истечении которой будет выполнен вызов функции или переданный в виде строки код. Если аргумент, определяющий задержку, отсутствует, то используется значение задержки, установленное по умолчанию – 0.
Примечание: 1 секунда = 1000 миллисекунд
param1, param2, ... : Параметры, которые будут переданы в качестве аргументов указанной функции.

Возвращаемое значение

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

Пример

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
</head>
<body>

  <p><button onclick="showAlert();">Вызвать alert через 3 секунды</button></p>
  <p><button onclick="clearAlert();">Отменить вызов alert</button></p>

<script>
let timeoutID;

function showAlert() {
  timeoutID = setTimeout("alert('Та-да!');", 3000);
}

function clearAlert() {
  clearTimeout(timeoutID);
}
</script>

</body>
</html>

Попробовать »