Таймер обратного отсчета JavaScript: несколько методов создания таймера в JavaScript

Вот несколько способов создания таймера обратного отсчета JavaScript:

Метод 1: использование setInterval

function countdownTimer(duration, display) {
  var timer = duration, minutes, seconds;
  setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}
// Usage
var countdownDisplay = document.getElementById("countdown");
var countdownDuration = 180; // 3 minutes
countdownTimer(countdownDuration, countdownDisplay);

Метод 2: использование setTimeout

function countdownTimer(duration, display) {
  if (duration < 0) {
    return;
  }
  display.textContent = formatTime(duration);
  if (--duration >= 0) {
    setTimeout(function () {
      countdownTimer(duration, display);
    }, 1000);
  }
}
function formatTime(time) {
  var minutes = Math.floor(time / 60);
  var seconds = time % 60;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  return minutes + ":" + seconds;
}
// Usage
var countdownDisplay = document.getElementById("countdown");
var countdownDuration = 180; // 3 minutes
countdownTimer(countdownDuration, countdownDisplay);

Метод 3. Использование объектов Date

function countdownTimer(endTime, display) {
  var timerInterval = setInterval(function () {
    var currentTime = new Date().getTime();
    var distance = endTime - currentTime;
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (distance < 0) {
      clearInterval(timerInterval);
      display.textContent = "00:00";
    }
  }, 1000);
}
// Usage
var countdownDisplay = document.getElementById("countdown");
var countdownEndTime = new Date().getTime() + 180000; // 3 minutes
countdownTimer(countdownEndTime, countdownDisplay);