javascript - 来自另一个选项卡时，Jquery setInterval 太快

Question

我有一个使用 jquery 的 setIntervall() 函数无限滑动图像的网站。

在 Chrome 13 中调用页面时，我切换到另一个选项卡几秒钟后返回，图像滑动速度更快，就好像它试图保持在没有切换到另一个选项卡的位置一样.

我该如何解决这个问题？

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").animate({left: -1 * offset}, 1000);
}

Answer 1

一开始我想为所有的错误道歉 - 我的英语并不完美。

您的问题的解决方案可能非常简单:

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}

不活动的浏览器选项卡会缓冲一些 setInterval 或 setTimeout 函数。 stop(true,true) - 将停止所有缓冲事件并仅立即执行最后一个动画。 这个问题也会出现在 Firefox > 5.0 - 阅读这篇文章:Firefox 5 - changes

The window.setTimeout() method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).

您可以在此处阅读 animate 的工作原理 - 它会多次触发 setInterval 函数。 How animate really works in jQuery