Как создать таймер обратного отсчета

Автор оригинала: FreeCodeCamp Community Member.

Создание простого таймера обратного отсчета – это легко с собственными временными мероприятиями JavaScript. Вы можете прочитать больше о тех в этой статье.

Создание таймера обратного отсчета

Начните с объявления пустой функции под названием StartCountdown Это занимает секунд В качестве аргумента:

function startCountdown(seconds) {
    
};

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

function startCountdown(seconds) {
  let counter = seconds;
}

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

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval();
}

Вы можете пройти функцию напрямую на Setinterval Так что давайте передам это пустую функцию стрелки в качестве первого аргумента. Кроме того, мы хотим, чтобы функция запускала каждую секунду, поэтому пройдите 1000 в качестве второго аргумента:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    
  }, 1000);
}

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

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
  }, 1000);
}

Теперь, если вы запустите функцию, вы увидите, что это работает, но не останавливается один раз счетчик меньше 0:

startCountdown(5);

// Console Output // 
// 5
// 4
// 3
// 2
// 1
// 0 
// -1
// -2 

Чтобы исправить это, сначала напишите Если Заявление, которое выполняет, когда счетчик меньше 0:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
      
    if (counter < 0 ) {
      
    }
  }, 1000);
}

Тогда внутри Если Заявление, очистить Интервал с ClearInterval и журнал звуковой строки тревоги к консоли:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
      
    if (counter < 0 ) {
      clearInterval(interval);
      console.log('Ding!');
    }
  }, 1000);
}

Исполнение

Теперь, когда вы запускаете таймер, вы должны увидеть следующее:

startCountdown(5);

// Console Output // 
// 5
// 4
// 3
// 2
// 1
// 0 
// Ding!

Больше ресурсов

JavaScript Timing Events: Settimeout и Setinterval

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-countdown-timer/”