Jquery setInterval 最小化

Question

我有图像 slider ，其中图像在超时时相互替换。我使用 jQuery 函数 setInterval() 但有一个小问题，在最小化浏览器窗口后，该函数继续“工作”，并且我恢复浏览器窗口图像的位置以令人难以置信的高速相互替换，就像窗口最小化后的整个时间 setInterval( )收集操作，但在恢复窗口后执行它们。

如何在浏览器最小化时暂停 setInterval() 或在窗口最小化时保留交换图像？

Answer 1

animate() 的文档明确提到:

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

因此，您可以在动画回调中调用 setTimeout() 来链接下一个周期(如果可能)，或者 queue() 对 的调用>setTimeout() 在 animate() 调用之间。

编辑:根据评论中的要求，这里是一个简单的queue()示例。下面的代码在幻灯片动画之间强制执行两秒的延迟:

$("selector").slideUp("slow").queue(function(next) {
    window.setTimeout(next, 2000);
}).slideDown("slow");