【问题标题】:How do I reset the setInterval timer?如何重置 setInterval 计时器?
【发布时间】:2011-12-28 21:56:24
【问题描述】:

如何将setInterval 计时器重置为 0?

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

我试过clearInterval(myTimer) 但这完全停止了间隔。我希望它从 0 开始。

【问题讨论】:

    标签: javascript setinterval reset


    【解决方案1】:

    如果“重启”是指此时开始一个新的 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/

    【讨论】:

      【解决方案2】:

      使用clearInterval 清除间隔后,您可以再次使用setInterval。并且为了避免重复回调,将其外部化为一个单独的函数:

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

      然后:

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

      那么当你决定重启时:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-08-08
        • 2021-03-11
        • 1970-01-01
        • 2020-11-29
        相关资源
        最近更新 更多