现代jQuery动画中的setInterval（）和setTimeout（）是不是很糟糕？ [英] Is setInterval() and setTimeout() bad things to do in modern jQuery animations?

问题描述

我在jQuery 1.6的动画中遇到了一些问题。我用jQuery 1.5解决了它。

I had some problems with animations with jQuery 1.6. I solved it with jQuery 1.5.

在我的项目中，我使用 setInterval（）来制作自定义徽标滑块。动画一两个即时（不是同时）激发。当我在页面上时，一切顺利，但是当我进入其他选项卡并在我的页面项目中回归（一分钟，两个左右）之后，一切都变得疯狂......

In my project I used setInterval() to make custom logo slider. Animations fired up instantly (not simultaneously) two by two. Everything goes smoothly when I am on the page, but when I went on other tab and comeback (after minute, two or so) to my page project everything goes crazy...

好的，所以我得到了一个答案，使用 Queue（）。我能用这种方法实现同样的目的吗？

Ok, so I got one answer to use Queue(). Can I achieve same thing with that method?

我已经预订了Manning jQuery in Action，并且没有任何内容可以通过 Queue（）立即启动动画。

I have book Manning jQuery in Action and there is nothing on instantly fired up animations with Queue().

链接到Jsfiddle

引用一些答案：

由于requestAnimationFrame（）的性质，你不应该使用setInterval或setTimeout循环对动画进行排队。

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop.

推荐答案

动画的一般 setInterval == BAD 和 setTimeout == GOOD 。

setInterval 将尝试播放追赶，因为 nnnnnn 声明：

setInterval will try play catchup, as nnnnnn stated:

某些浏览器可能会对所有内容进行排队，然后在
标签再次获得焦点时尝试赶上

some browsers may queue everything and then try to catch up when your tab gets focus again

循环animate（）的最佳方法是通过递归调用，例如：

You best method for looping animate() is by calling recursively, for example:

var myTimeout;

var myAnimation = function () {

    $('#myID').animate({
        [propertyKey]:[propertyValue]
    }, 5000, function() {
        myTimeout = setTimeOut(myAnimation, 1000);
    });
}

注意 myTimeout 如何保持在范围之外 myAnnimation 允许停止动画的能力

Notice how the myTimeout is held outside the scope of myAnnimation allowing the ability to stop the animation

clearTimeout(myTimeout);

您可以连接到 window.unload 事件。

这篇关于现代jQuery动画中的setInterval（）和setTimeout（）是不是很糟糕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！