[javascript] 자바 스크립트 : pause setTimeout ();

Timeout은 해결책을 찾기에 충분히 쉬웠지만 Interval은 약간 까다로 웠습니다.

이 문제를 해결하기 위해 다음 두 가지 클래스를 생각해 냈습니다.

function PauseableTimeout(func, delay){
    this.func = func;

    var _now = new Date().getTime();
    this.triggerTime = _now + delay;

    this.t = window.setTimeout(this.func,delay);

    this.paused_timeLeft = 0;

    this.getTimeLeft = function(){
        var now = new Date();

        return this.triggerTime - now;
    }

    this.pause = function(){
        this.paused_timeLeft = this.getTimeLeft();

        window.clearTimeout(this.t);
        this.t = null;
    }

    this.resume = function(){
        if (this.t == null){
            this.t = window.setTimeout(this.func, this.paused_timeLeft);
        }
    }

    this.clearTimeout = function(){ window.clearTimeout(this.t);}
}

function PauseableInterval(func, delay){
    this.func = func;
    this.delay = delay;

    this.triggerSetAt = new Date().getTime();
    this.triggerTime = this.triggerSetAt + this.delay;

    this.i = window.setInterval(this.func, this.delay);

    this.t_restart = null;

    this.paused_timeLeft = 0;

    this.getTimeLeft = function(){
        var now = new Date();
        return this.delay - ((now - this.triggerSetAt) % this.delay);
    }

    this.pause = function(){
        this.paused_timeLeft = this.getTimeLeft();
        window.clearInterval(this.i);
        this.i = null;
    }

    this.restart = function(sender){
        sender.i = window.setInterval(sender.func, sender.delay);
    }

    this.resume = function(){
        if (this.i == null){
            this.i = window.setTimeout(this.restart, this.paused_timeLeft, this);
        }
    }

    this.clearInterval = function(){ window.clearInterval(this.i);}
}

다음과 같이 구현할 수 있습니다.

var pt_hey = new PauseableTimeout(function(){
    alert("hello");
}, 2000);

window.setTimeout(function(){
    pt_hey.pause();
}, 1000);

window.setTimeout("pt_hey.start()", 2000);

이 예제는 2 초 후에 “hey”를 경고하도록 예약 된 일시 중지 가능한 제한 시간 (pt_hey)을 설정합니다. 다른 제한 시간은 1 초 후에 pt_hey를 일시 중지합니다. 세 번째 Timeout은 2 초 후에 pt_hey를 다시 시작합니다. pt_hey는 1 초 동안 실행되고 1 초 동안 일시 중지 된 다음 다시 실행됩니다. pt_hey는 3 초 후에 트리거됩니다.

이제 더 까다로운 간격

var pi_hey = new PauseableInterval(function(){
    console.log("hello world");
}, 2000);

window.setTimeout("pi_hey.pause()", 5000);

window.setTimeout("pi_hey.resume()", 6000);

이 예에서는 2 초마다 콘솔에 “hello world”를 작성하도록 일시 중지 가능한 간격 (pi_hey)을 설정합니다. 시간 초과는 5 초 후에 pi_hey를 일시 중지합니다. 또 다른 제한 시간은 6 초 후에 pi_hey를 재개합니다. 따라서 pi_hey는 두 번 트리거되고 1 초 동안 실행되고 1 초 동안 일시 중지되고 1 초 동안 실행 된 다음 2 초마다 트리거를 계속합니다.

기타 기능

• clearTimeout () 및 clearInterval ()

  pt_hey.clearTimeout();및 pi_hey.clearInterval();시간 초과와 간격을 취소 할 수있는 쉬운 방법 역할을합니다.

• getTimeLeft ()

  pt_hey.getTimeLeft();그리고 pi_hey.getTimeLeft();다음 트리거이 예약 될 때까지하는 시간을 밀리 초 단위로 반환합니다.

답변

'use strict';


    //Constructor
    var Timer = function(cb, delay) {
      this.cb = cb;
      this.delay = delay;
      this.elapsed = 0;
      this.remaining = this.delay - self.elapsed;
    };

    console.log(Timer);

    Timer.prototype = function() {
      var _start = function(x, y) {
          var self = this;
          if (self.elapsed < self.delay) {
            clearInterval(self.interval);
            self.interval = setInterval(function() {
              self.elapsed += 50;
              self.remaining = self.delay - self.elapsed;
              console.log('elapsed: ' + self.elapsed,
                          'remaining: ' + self.remaining,
                          'delay: ' + self.delay);
              if (self.elapsed >= self.delay) {
                clearInterval(self.interval);
                self.cb();
              }
            }, 50);
          }
        },
        _pause = function() {
          var self = this;
          clearInterval(self.interval);
        },
        _restart = function() {
          var self = this;
          self.elapsed = 0;
          console.log(self);
          clearInterval(self.interval);
          self.start();
        };

      //public member definitions
      return {
        start: _start,
        pause: _pause,
        restart: _restart
      };
    }();


    // - - - - - - - - how to use this class

    var restartBtn = document.getElementById('restart');
    var pauseBtn = document.getElementById('pause');
    var startBtn = document.getElementById('start');

    var timer = new Timer(function() {
      console.log('Done!');
    }, 2000);

    restartBtn.addEventListener('click', function(e) {
      timer.restart();
    });
    pauseBtn.addEventListener('click', function(e) {
      timer.pause();
    });
    startBtn.addEventListener('click', function(e) {
      timer.start();
    });