Chrome 动画超时问题

Question

我用 jQuery 和 autplay 编写了一个简单的滑块。如果启用自动播放，则会设置指向函数的 setTimeout。然后这个函数有一个递归的 setTimeout 到它自己。

除了 Chrome 之外，一切都运行良好。当我更改了一个选项卡后，等待一段时间然后返回，滑块就崩溃了。看起来有多个超时活动实例...但事实并非如此，因为我将超时指定给同一个变量。

一些相关代码：

var timer;

  function autoplay() {
    currentPosition++;
    if(currentPosition == numberOfSlides) {
      // last slide
      currentPosition = 0;  
    }
    manageNavigation(currentPosition);

    // Hide / show controls
    manageControls(currentPosition);

    // animate the slides
    slideshowAnimate();  

    // set timer
    if(autoplay_enable) {
      //clearTimeout(timer);
      timer = setTimeout(function() { autoplay() }, interval*1000)     
     }
   }
  function setTimer() { 
    if(autoplay_enable) {
      timer = setTimeout(function() { autoplay() }, interval*1000)     
    }
  }

  setTimer();

Answer 1

不，重置timer的值不会取消当前计时器。为此，您需要clearTimeout。所有计时器保存的是对计时器的数字引用，而不是闭包或任何类似性质的东西。

假设您有良好的条件来启动 setTimer()，您的代码应该如下所示：

var timer;

function autoplay() {
    clearTimeout(timer); //! New code.
    currentPosition++;
    if(currentPosition == numberOfSlides) {
      // last slide
      currentPosition = 0;  
    }
    manageNavigation(currentPosition);

    // Hide / show controls
    manageControls(currentPosition);

    // animate the slides
    slideshowAnimate();  

    // set timer
    setTimer(); //! Switched from having multiple startup locations.
}
function setTimer() { 
    if(autoplay_enable) {
      timer = setTimeout(autoplay, interval*1000);  //! Removed unnecessary closure.
    }
}

setTimer();

Answer 2

setTimeout的返回是一个索引号，用于定时器的内部识别，而不是实际的定时器本身。因此，您只是重写了指向计时器的内容，而不是在再次创建计时器时删除正在运行的计时器。

为了节省计算能力，Chrome 引擎冻结了后台选项卡中运行的大多数 JavaScript，然后当它重新获得焦点时似乎会尝试“赶上”。但不确定修复方法是什么。绝对使用clearTimeout或更好的方法，但使用Timer对象来尝试将其捕获为重复操作。

Answer 3

我尝试找到一个小修复。您可以尝试将其添加到您的代码中

var timer;

...

$(window).blur(function() {
    clearTimeout(timer);
}).focus(function() {
    timer= setInterval(autoplay, interval*1000);
});

希望这可以有所帮助。