setInterval 타이머를 어떻게 재설정합니까?


83

setInterval타이머를 0으로 재설정하려면 어떻게합니까 ?

var myTimer = setInterval(function() {
  console.log('idle');
}, 4000);

나는 시도 clearInterval(myTimer)했지만 그것은 완전히 간격을 멈춘다. 0부터 다시 시작하고 싶습니다.

답변:


174

"다시 시작"이이 순간에 새로운 4 초 간격을 시작하는 것을 의미하는 경우 타이머를 중지하고 다시 시작해야합니다.

function myFn() {console.log('idle');}

var myTimer = setInterval(myFn, 4000);

// Then, later at some future time, 
// to restart a new 4 second interval starting at this exact moment in time
clearInterval(myTimer);
myTimer = setInterval(myFn, 4000);

재설정 기능을 제공하는 작은 타이머 개체를 사용할 수도 있습니다.

function Timer(fn, t) {
    var timerObj = setInterval(fn, t);

    this.stop = function() {
        if (timerObj) {
            clearInterval(timerObj);
            timerObj = null;
        }
        return this;
    }

    // start timer using current settings (if it's not already running)
    this.start = function() {
        if (!timerObj) {
            this.stop();
            timerObj = setInterval(fn, t);
        }
        return this;
    }

    // start with new or original interval, stop current interval
    this.reset = function(newT = t) {
        t = newT;
        return this.stop().start();
    }
}

용법:

var timer = new Timer(function() {
    // your function here
}, 5000);


// switch interval to 10 seconds
timer.reset(10000);

// stop the timer
timer.stop();

// start the timer
timer.start();

작업 데모 : https://jsfiddle.net/jfriend00/t17vz506/


아름다운 물건. 나는 누군가가 자바 스크립트에서 OOP를 사용하는 것을 볼 때 항상 기분이 좋습니다! 감사합니다!
Fortin

12

간격을 지우면 다시 한 번 clearInterval할 수 setInterval있습니다. 콜백을 반복하지 않으려면 별도의 함수로 외부화합니다.

var ticker = function() {
    console.log('idle');
};

그때:

var myTimer = window.setInterval(ticker, 4000);

그런 다음 다시 시작하기로 결정할 때 :

window.clearInterval(myTimer);
myTimer = window.setInterval(ticker, 4000);

하지만 어떻게? clearInterval (myTimer) 및 setInterval (myTimer, 4000)이 작동하지 않습니다. :(
Rik de Vos

@RikdeVos, 왜 작동하지 않습니까? 또한이 아니다 setInterval(myTimer, 4000), 그것은해야합니다 setInterval(ticker, 4000);.
Darin Dimitrov
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.