Реализация таймеров и отсчета времени на JavaScript

Работа с таймером и отсчетом времени на JS

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

Ниже приведен пример таймера, который выводит в консоль текущее время каждые 1000 миллисекунд (1 секунда):

let count = 0;

const timerId = setInterval(function() {
  console.log(new Date().toLocaleTimeString());
  count++;
  if (count === 5) {
    clearInterval(timerId);
  }
}, 1000);

В приведенном выше примере функция setInterval() вызывается каждые 1000 миллисекунд, выводит в консоль текущее время и увеличивает счетчик. Когда счетчик достигает 5, мы останавливаем таймер, вызывая функцию clearInterval().

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

Ниже приведен пример отсчета времени до начала нового дня:

const now = new Date();
const newYear = new Date(now.getFullYear(), 0, 1);
const diff = newYear - now;

setTimeout(function() {
  console.log("Happy New Year!");
}, diff);

В приведенном выше примере мы сначала определяем текущую дату и дату начала нового года. Затем мы рассчитываем разницу между этими датами и передаем этот интервал времени в setTimeout().

Реализация таймеров и отсчета времени на React

В React можно реализовать таймеры и отсчет времени с помощью setInterval() или setTimeout() в связке с хуком useState() и useEffect().

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>{time} seconds have passed</div>;
}

export default Timer;

В приведенном выше примере мы используем хук useState() для определения текущего времени. Затем мы используем хук useEffect() для запуска таймера с интервалом в 1 секунду. Возвращаемая функция useEffect() очищает таймер, когда компонент удаляется.