为什么'；jQuery是否使用requestAnimationFrame？

有些浏览器支持

requestAnimationFrame

，为什么不使用它呢？毕竟，这是一场灾难。尽管如此，jQuery还是很有用。我找到了一个关于它的答案，但没有给出真正的解释？不过，我相信jQuery的人有他们的理由

---

为什么他们不使用这个很棒的API呢？

在v1.6.2版的jQuery源代码中，我看到了

requestAnimationFrame

，如果它存在的话。我还没有详细研究代码，以了解它可以用于任何用途，但它被用于代码的动画部分，而不是调用

setInterval（）

。以下是1.6.2中的代码：

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

我还没有使用1.6.4，所以我不知道该版本。如果它不在那个版本中，那么肯定有一些问题，所以它被删除了

编辑：

如果您阅读，它听起来像是从1.6.3中退出的，可能会被放回1.7中，它被退出的主要原因是因为它打破了一些人们“错误地”使用动画队列的东西（尽管这可能是一个意见问题）.

在中，您可以阅读他们在一段时间后停止使用

requestionAnimationFrame

的原因

---

总而言之，问题是当窗口没有焦点时，动画没有运行（浏览器试图减少CPU负载），如果窗口被隐藏，这是正常的，但如果它是可见的，就没有焦点。此外，动画队列堆积如山，在窗口恢复焦点后，事情变得疯狂起来。这将需要在代码中进行难看的更改和/或更改人们向动画队列添加内容的方式。因此，决定删除支持，直到有更好的方法来执行此操作。

鉴于这里的其他答案和反对意见，我想用一个简单的幻灯片动画来测试这一点：

截至2013年，此处其他答案中的反对意见似乎不再重要。我补充说

到我现有的动画代码，并验证它正在打开并影响正在使用的淡入淡出动画。它工作可靠，即使在背景窗口，在Chrome30，IE11和FF24。在测试安卓2.3时，它似乎使用了polyfill并按预期工作

jquery3 。基本上，jQuery可以很好地处理它，但是一些用户会调用

.setInterval（function（）{tag.animate（

），把它搞砸了。因此，主要版本的发布将一帆风顺。jQuery 3不支持IE8及以下版本，也永远不支持IE8，所以如果您有IE8用户，请坚持使用jQuery 1.x

CSS转换 在我的测试中，

requestAnimationFrame

的CPU/电池节省声称是错误的承诺。我看到它的CPU使用率很高，例如，长时间的褪色。节省CPU/电池的原因可能是浏览器，尤其是移动浏览器，对您的意图和其他要求做出了更强有力的假设m、 本地代码仍然比Javascript+DOM快

---

<如果你真的想保存CPU /电池，CSS转换是为你准备的。IE9和下面不能处理它们，并且仍然有很多用户在那里，所以在页面的底部考虑它们的返回到<代码>动画。请看我已经搜索了<代码>请求引擎动画框架< /代码>，没有合适的方法来添加T。他的后帖1.8是使用类似于我的插件的东西：从jQuery1.8开始，我确保我们可以支持重写计时器循环，并编写了一个非常简单的插件，它将用

requestAnimationFrame

替换

setInterval

——这主要是由于人们做了一些愚蠢的事情，比如

setInterval（函数{$（'.slideshow）.animate（…）；}，3000）；

。相反，他们应该等待每一个动画的结尾排到第二个。这是一个简单的修复方法，如果它落地，我们都可以得到更平滑、更省电的动画。这是真的，当窗口没有焦点时，我可以看到滑块褪色——至少在Chrome中是这样。虽然jQuery Core不使用

requestAnimationFrame

，但我仍然可以看到在1.8中添加了挂钩，允许您覆盖

setInterval

循环，从而可以安装最新版本的jQuery使用

requestAnimationFrame

。当它在2016年6月发布时，即2011年9月之后。