如何防止 JQuery 动画调用排队

Question

Background

我正在开发一个严重依赖 JQuery .animate(( 的项目，它偶尔会通过调用 animate(( 的 Socket.io 接收外部更新。当窗口打开时，一切运行正常，动画调用可以异步运行。

问题

但是，当浏览器最小化或打开其他选项卡然后重新打开时，所有应该在关闭时运行的动画都将排队并运行，因为它们已收到。

这是动画调用：

$(div).animate({
  'top': this.topPos(),
  'right': this.rightPos()
}, 100);

有没有一种简单的方法可以将选项添加到 animate(( 调用或调用一些 jquery 函数，或者我应该向应用程序添加适当的逻辑？

谢谢。

Answer 1

通过将true作为两个参数传递来使用 .stop(true,true)

.stop( [clearQueue], [jumpToEnd] )
clearQueue: A Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd:  A Boolean indicating whether to complete the current animation immediately. Defaults to false.

在您的示例中，它将像以下方式应用：

$(div).stop(true,true).animate({
  'top': this.topPos(),
  'right': this.rightPos()
}, 100);

Answer 2

这种行为是由引入requestAnimationFrame引起的，该已从jQuery 1.6.3rc1(昨天发布(中删除。

另请参阅：http://bugs.jquery.com/ticket/9381

Answer 3

在

再次调用animate()之前，可以对要进行动画处理的元素调用stop()。喜欢这个：

$(div).stop().animate({
  'top': this.topPos(),
  'right': this.rightPos()
}, 100);

它将停止动画排队并一次性触发。

有关stop()的详细信息，请参阅此处

希望这有帮助。