Руководство по функциям таймера в JavaScript

Таймер — это функция, которая позволяет нам выполнять функцию в определенное время.

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

В этом разделе будет показано, как создавать таймеры для задержки выполнения кода, а также как выполнять одно или несколько действий повторно, используя эти функции в JavaScript.

Выполнение кода после задержки

Функция setTimeout() используется для выполнения функции или указанного фрагмента кода только один раз через определенный промежуток времени. Ее основной синтаксис — setTimeout(function, delay)).

Эта функция принимает два параметра: функцию для выполнения, и необязательный параметр задержки, который представляет собой количество миллисекунд перед выполнением функции (1 секунда = 1000 миллисекунд). Давайте посмотрим, как это работает:

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>

Приведенный выше пример отобразит предупреждающее сообщение через 2 секунды после нажатия кнопки.

Выполнение кода с регулярным интервалом

Точно так же вы можете использовать функцию setInterval() для многократного выполнения функции или указанного фрагмента кода через фиксированные промежутки времени. Ее основной синтаксис — setInterval(function, delay).

Эта функция также принимает два параметра: функцию для выполнения, и интервал, который представляет собой количество миллисекунд перед выполнением функции (1 секунда = 1000 миллисекунд). Вот пример:

<script>
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>Текущее время на вашем компьютере: <span id="clock"></span></p>

Приведенный выше пример будет выполнять функцию showTime() повторно через 1 секунду. Эта функция извлекает текущее время на вашем компьютере и отображает его в браузере.

Остановка выполнения кода или отмена таймера

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

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

Функция setTimeout() принимает один параметр — идентификатор и очищает таймер setTimeout(), связанный с этим идентификатором, как показано в следующем примере:

<script>
var timeoutID;
 
function delayedAlert() {
  timeoutID = setTimeout(showAlert, 2000);
}
 
function showAlert() {
  alert('This is a JavaScript alert box.');
}
 
function clearAlert() {
  clearTimeout(timeoutID);
}
</script>
 
<button onclick="delayedAlert();">Показать оповещение через две секунды</button>
 
<button onclick="clearAlert();">Отменить оповещение перед его отображением</button>

Точно так же метод clearInterval() используется для очистки или отключения таймера setInterval().

<script>
var intervalID;
 
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
 
function stopClock() {
    clearInterval(intervalID);
}
 
var intervalID = setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: <span id="clock"></span></p>
 
<button onclick="stopClock();">Stop Clock</button>