Методы setTimeout и setInterval в JavaScript

Метод setTimeout()

Метод setTimeout() вызывает функцию по истечении указанного времени в миллисекундах. Этот метод принимает функцию в качестве первого аргумента и время в миллисекундах в качестве второго аргумента. Вы можете написать свою логику внутри тела функции, которая будет выполняться по истечении указанного вами времени.

Например: Показать окно предупреждения через 5 секунд.

setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);

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

var timer = setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);
clearTimeout(timer);

Метод setInterval()

Метод setInterval() вызывает функцию через указанный интервал времени, указанный в миллисекундах. В качестве аргументов он принимает функцию и время (в миллисекундах).

Например: Выводить случайное число каждую секунду.

setInterval(() => {
    console.log(Math.random());
}, 1000);

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

var interval = setInterval(() => {
    console.log(Math.random());
}, 1000);
clearInterval(interval);

Создайте работающий таймер

Чтобы создать работающие часы, нам понадобится помощь метода setInterval() и объекта Date. Мы можем получить текущее время, создав новый объект Date.

new Date().toLocaleTimeString(); // 6:30:49 PM

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

В этом примере мы будем создавать новый объект Date каждую секунду и печатать его.

var date = setInterval(() => { 
   console.log(new Date().toLocaleTimeString());
}, 1000);

Чтобы показать работающий таймер часов на веб-странице, вы можете создать элемент div в HTML и установить его innerHTML с последним временем каждую секунду.

HTML

<div id="time"> </div>

JavaScript

var date = setInterval(() => {
  const element = document.getElementById('time');
  element.innerHTML = new Date().toLocaleTimeString();
}, 1000);

Вам также может понравиться

• Метод JavaScript Array forEach() для перебора массива
• 20 техник сокращенного кодирования JavaScript, которые сэкономят ваше время
• Обратные вызовы в JavaScript

Спасибо, что уделили время☺️
Другие блоги по веб-разработке можно найти на jscurious.com.