Question

我用JQuery创建了一个幻灯片脚本，我正在使用setInterval（我也尝试使用setTimeout并得到了同样的问题）。问题是，当我进入一个新选项卡并回到我的页面时，幻灯片显示在幻灯片上似乎是双速。有时它甚至会减速并恢复正常速度。我很困惑为什么会这样做。请注意我此时只在FF中试过这个。

pictureAmount = 4;
fadeSpeed = 600;
delay = 6000;
heightOfPicture = 320; //px

function nextSlide(count) {
    $('#slide-link').fadeOut(fadeSpeed, 'linear', function () {
        document.getElementById('slide-link').style.backgroundPosition = '0 -' + (heightOfPicture * count) + 'px';
    }).fadeIn(fadeSpeed, 'linear');
}

count = 0;
window.setInterval(function () {
    if (++count >= pictureAmount) count = 0;

    nextSlide(count);
}, delay);

以下是链接http://mprodesigns.com/new

Answer 1

您所看到的是更新的浏览器中常见的（并且相当新的）行为。页面处于非活动状态时，它们会降低计时器的速度当你回到页面时，计时器“赶上”。

完全避免使用“setInterval（）”并改为使用“setTimeout（）”。让自己的代码在每次唤醒时重新设置超时。这样，您就不会有许多待处理的调用程序调用。

因此，您可以执行此操作而不是“setInterval（）”：

function timerHandler() {
  if (++count >= pictureAmount) count = 0;
  nextSlide(count);
  setTimeout(timerHandler, delay);
}

setTimeout(timerHandler, delay);

通过增加最小延迟时间来施加“减速”效果。通常，当您专注于窗口时，它就像10或15毫秒。但是，当选项卡/窗口没有聚焦时，它就像1000毫秒。

编辑 - Here is a demonstration page如果您离开标签并返回该标签，则不应显示异常加速。

setInterval有时是双倍的

1 个答案: