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

Используя таймеры, вы можете отложить выполнение кода, чтобы он не выполнялся в тот момент, когда происходит событие или страница загружается. Например, вы можете использовать таймеры для регулярной смены рекламных баннеров на вашем сайте или показывать часы реального времени. В 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 секунды после нажатия кнопки.

Если параметр delay не указан, используется значение 0, что означает, что указанная функция выполнится сразу, без задержек.

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

Точно так же вы можете использовать функцию 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>

Технически вы можете использовать clearTimeout() и clearInterval() взаимозаменяемо. Однако для ясности и удобства сопровождения кода вам следует избегать этого.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.