jQuery setInterval最小化 [英] Jquery setInterval on minimize

问题描述

我有图像滑块，其中图像通过超时相互替换.我使用jQuery函数setInterval()，但是有一个小问题，在最小化浏览器窗口后，此功能保持正常工作"，并且我在还原浏览器窗口图像时以令人难以置信的高速替换彼此，就像将窗口最小化之后的整个时间setInterval( )收集操作，但在还原窗口后执行操作.

I have image slider where images replace each other by timeout. I use jQuery function setInterval() but there is a small problem, after minimizing browser windows this function keep "working", and where I restore browser window images replace each other with incrediable high speed, like the whole time after window was minimized setInterval() collect actions but executing them after restoring the window.

如何在最小化Windows时暂停浏览器上的setInterval()最小化或保持交换图像?

How to pause setInterval() on browser minimize or keep swap images when windows is minimized?

推荐答案

animate()明确提及:

由于 requestAnimationFrame()的性质，您永远不应该 使用setInterval或setTimeout循环将动画排入队列.为了 保留CPU资源，支持requestAnimationFrame的浏览器 当不显示窗口/选项卡时，将不会更新动画.如果 您继续通过setInterval或setTimeout将动画排入队列，同时 动画已暂停，所有排队的动画将开始播放 当窗口/标签重新获得焦点时.为避免此潜在问题， 在循环中使用您上一个动画的回调，或附加一个 元素 .queue()的函数以设置超时时间以开始下一个 动画.

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()来链接下一个循环，或者在animate()调用之间queue()调用setTimeout().

So, you can either call setTimeout() in the callback of your animation to chain the next cycle, if possible, or queue() the calls to setTimeout() between the calls to animate().

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

As requested in comments, here is a simple queue() example. The code below enforces a two-second delay between the slide animations:

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

这篇关于jQuery setInterval最小化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！