$.fn.countdown = function(seconds, repeatSeconds, callback) {
  var $el = $(this);

  var $timeEl = {
    m: $el.find('.minutes'),
    s: $el.find('.seconds')
  };

  var times = {
    init: Number(seconds),
    m: 0,
    s: 0
  };

  var checkLetters = function(number) {
    var str = number.toString();
    var result = number < 10 ? '0' + str : str;

    return result;
  };

  var changeTime = function($target, a) {
    $target.html(checkLetters(a));
  };

  var interval;

  var countDown = function(discountSeconds) {
    times.init = times.init - discountSeconds;
    times.m = Math.floor((times.init % (60 * 60)) / 60);
    times.s = Math.floor((times.init % (60 * 60)) % 60);

    changeTime($timeEl.m, times.m);
    changeTime($timeEl.s, times.s);

    if (times.init === 0) {
      clearInterval(interval);

      if (callback && typeof(callback) === 'function') {
        callback();
      }
    }
  };

  countDown(0);

  interval = setInterval(function() {
    countDown(repeatSeconds);
  }, repeatSeconds * 1000);
};

$('.countdown .timer').countdown(180, 1, function() {
  console.log('timoeout!');
});

레이어로 전환하며 보이고 안보이고에 따른 시작, 멈춤 처리 추가

$.fn.countdown = function(seconds, repeatSeconds, callback) {
  var $el = $(this);

  if (!$el.length) {
    return;
  }

  var $timeEl = {
    m: $el.find('.minutes'),
    s: $el.find('.seconds')
  };

  var times = {
    init: Number(seconds),
    m: 0,
    s: 0
  };

  var checkLetters = function(number) {
    var str = number.toString();
    var result = number < 10 ? '0' + str : str;

    return result;
  };

  var changeTime = function($target, a) {
    $target.html(checkLetters(a));
  };

  var interval;

  var countDown = function(discountSeconds) {
    times.init = times.init - discountSeconds;
    times.m = Math.floor((times.init % (60 * 60)) / 60);
    times.s = Math.floor((times.init % (60 * 60)) % 60);

    changeTime($timeEl.m, times.m);
    changeTime($timeEl.s, times.s);

    if (times.init === 0) {
      clearInterval(interval);

      if (callback && typeof(callback) === 'function') {
        callback();
      }
    }

    var $isVisible = $el.closest('.visible').length;

    if (!$isVisible) {
      clearInterval(interval);
    }
  };

  countDown(0);

  interval = setInterval(function() {
    countDown(repeatSeconds);
  }, repeatSeconds * 1000);
};

$('.btnSelector').on('click', function(e) {
  e.preventDefault();
  $('.toggleContents').addClass('visible');
  $('.countdown .timer').countdown(180, 1, function() {
    console.log('time out!');
  });
});

보통 나는 예전에 작업한 코드가 있어도 공부할겸, 시간이 지나면 여기저기서 보고 들은게 생기니 이전보다 더 영리한 코드가 나올지도 모른다는 기대감에 이전거를 조금도 참고하지 않고 새로 만든다. 이번에도 새로 만들면서 이전 코드랑 비교를 해보려고 했는데 카운트다운 쓴적이 너무 오래되서 이전에 어디에서 사용했는지 작성했던 코드를 못찾겠어서… 이참에 범용으로 쓸만한건 기록해두기로 했다.

2019.12.31

function Timer() {
  var timer = this;

  timer.init = 600;
  timer.interval = null;
  timer.$viewEl = $('.countdownTimer');
  timer.$m = timer.$viewEl.find('.minutes');
  timer.$s = timer.$viewEl.find('.seconds');
  timer.$dataEl = $('input[name="timerInit"]')[0];
  timer.data = Number(timer.$dataEl.value) || timer.init;
  timer.m = 0;
  timer.s = 0;

  timer.toDoubled = function(number) {
    return number < 10 ? '0' + number : number;
  };

  timer.calc = function(data) {
    timer.m = Math.floor((data % (60 * 60)) / 60);
    timer.s = timer.toDoubled(Math.floor((data % (60 * 60)) % 60));
  };

  timer.view = function() {
    timer.$dataEl.value = timer.data;
    timer.$m.text(timer.m);
    timer.$s.text(timer.s);
  };

  timer.pause = function() {
    clearInterval(timer.interval);
  };

  timer.countdown = function() {
    if (timer.data <= 0) {
      timer.pause();
      return;
    }

    timer.data--;
    timer.calc(timer.data);
    timer.view();
  };

  timer.stop = function() {
    timer.pause();
    timer.data = timer.init;
    timer.calc(timer.data);
    timer.view();
  };

  timer.start = function() {
    timer.interval = setInterval(timer.countdown, 1000);
  };
}

var countdown = new Timer();
countdown.start();

정말 오랜만에 타이머 쓸일이 있었다. 일단 바쁘니 기록만 남겨둠..

toice's note

카운트다운 타이머 스크립트

2019.12.31