jquery - 使用递归链接 jQuery 动画会导致浏览器崩溃

Question

这是我想做的事情的基本想法:

1. 将 DIV 的 innerHTML 设置为某个值 X
2. 为 DIV 制作动画
3. 动画结束后，更改 X 的值并重复 N 次

如果我在循环中执行此操作，最终会发生的情况是，因为动画是异步发生的，所以在动画有机会针对 X 的每个值运行之前，循环会完成并将 DIV 设置为其最终值。

如this question请注意，解决此问题的最佳方法是在动画的回调处理程序中递归调用该函数。这样，在前一个值的动画完成之前，DIV 的值不会更改。

这在某种程度上非常有效。如果我同时对一堆 DIV 进行动画处理，我的浏览器就会不堪重负并崩溃。太多的递归。

有人能想出一种不使用递归来做到这一点的方法吗？

编辑:

这是我的代码:

• 递归:http://jsfiddle.net/W7aFm/
• 设置间隔:http://jsfiddle.net/2HYYm/

Answer 1

使用 setInterval，您应该能够执行如下操作。根本没有发生递归。 (当然，这个例子是人为的，但应该解释这个概念。)

工作示例:http://jsfiddle.net/TNwAZ/1/

HTML

<div id='myDiv' style="position:relative">div</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Javascript

var count = 10;
var duration = 500;

var interval = setInterval(function() { 
                                 $('#myDiv').text(count).animate({left: '+=50'},duration);
                                 count--;      // Decrement count
                                 if(!count) { clearTimeout(interval) }
                           }, duration );​

<小时/>

编辑:

不确定如何让元素进行动画处理，但这里有一个将对它们的引用放入数组中并循环的示例。

http://jsfiddle.net/TNwAZ/3/

HTML

<div id='myDiv1' style="position:relative">div 1</div>
<div id='myDiv2' style="position:relative">div 2</div>
<div id='myDiv3' style="position:relative">div 3</div>

Javascript

var divArray = ['myDiv1','myDiv2','myDiv3'];

for(var i in divArray) {
    intervalAnimate(divArray[i]);
}

function intervalAnimate(theDiv) {
    var count = 10;
    var duration = 500;

    var interval = setInterval(function() { 
              $('#' + theDiv).text(count).animate({left: '+=50'},duration);
               count--; // Decrement count
               if(!count) { clearTimeout(interval) }
       }, duration );
}

<小时/>

编辑:

此版本跳过 for 循环，仅获取 jQuery 对象的集合，并将其传递进去。

http://jsfiddle.net/TNwAZ/5/

HTML

<div id='myDiv1' style="position:relative">div 1</div>
<div id='myDiv2' style="position:relative">div 2</div>
<div id='myDiv3' style="position:relative">div 3</div>​

Javascript

var $divs = $('div[id^=myDiv]');

intervalAnimate($divs);

function intervalAnimate(collection) {
    var count = 10;
    var duration = 500;

    var interval = setInterval(function() { 
              $(collection).text(count).animate({left: '+=50'},duration);
               count--; // Decrement count
               if(!count) { clearTimeout(interval) }
       }, duration );
}