Question

每当我有一个快速间隔运行来执行计时器时，只要间隔暂停，每当切换标签时它都会出现故障。每当我使用更大的间隔时它工作得很好但是每当我拿一个较小的间隔时它会在标签切换期间暂停。

我想要一个更快的计时器，不知何故不停顿，任何想法？

代码

var GLOBAL_TIMER_INTERVAL = 60 * 1000,
        GLOBAL_TIMER_TIMEOUT = 60 * 1000;

function countdownInterval(){
    var interval = setInterval(function(){
    if(GLOBAL_TIMER_INTERVAL <= 0){
        clearInterval(interval);
      return;
    }

    GLOBAL_TIMER_INTERVAL = GLOBAL_TIMER_INTERVAL - 10;
    $('.countdown-interval').text(GLOBAL_TIMER_INTERVAL);
  }, 10);
}

countdownInterval();

function countdownTimeout(){
    setTimeout(function(){
    if(GLOBAL_TIMER_TIMEOUT <= 0){
        return;
    }

    GLOBAL_TIMER_TIMEOUT = GLOBAL_TIMER_TIMEOUT - 10;
    $('.countdown-timeout').text(GLOBAL_TIMER_TIMEOUT);
    countdownTimeout();
    }, 10);
}

countdownTimeout();

JSFiddle

Answer 1

非阻塞计时器：

  class Timer {
   constructor(task){
     this.task = task;
   }

   interval(ms){
     const end = +new Date() + ms;
     const check = () => {
       if(end > +new Date){
          this.task();
          interval(ms);
       } else {
          setTimeout(check, 100);
      }
      check();
    }
  }

所以你可以这样做：

  const log = new Timer(() => console.log("done"));
  log.interval(1000);

倒计时运行时切换选项卡

1 个答案: