鏈接使用遞歸崩潰的瀏覽器

這裏jQuery的動畫是什麼，我試圖做的基本思想：鏈接使用遞歸崩潰的瀏覽器

設置一個DIV到某一值X
的innerHTML動畫的DIV
當動畫結束，更改X的值並重復N次

如果我在一個循環中執行此操作，結果發生的是，因爲動畫是異步發生的，在動畫有機會運行X的每個值之前，循環結束並且DIV被設置爲它的最終值。

由於this question注意到，解決這個問題的最好方法是對這個問題進行遞歸調用函數在動畫的回調處理程序中。這樣，直到先前值的動畫完成後，DIV的值纔會更改。

這工作完美...到一個點。如果我在同一時間爲這些DIV製作一組動畫，我的瀏覽器就會不堪重負並崩潰。遞歸太多。

任何人都可以想辦法做到這一點沒有使用遞歸？

編輯：

這裏是我的代碼：

遞歸：http://jsfiddle.net/W7aFm/
的setInterval：http://jsfiddle.net/2HYYm/

來源

2010-05-03 Rob Sobers

使用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); 
}

來源

2010-05-03 22:42:56 user113716

我喜歡這個想法，但我似乎無法得到這個工作在多個div。也就是說，如果你將它封裝在一個函數中，並在myDiv1，myDiv2，myDiv3等的for循環中調用它，可以一次爲它們設置動畫。 – 2010-05-04 13:12:04

我會用一些解決方案更新我的答案。 – user113716 2010-05-04 13:36:24

謝謝！我修改我的代碼來使用setInterval（它工作！），但我有一個計時問題。我必須調整間隔時間的持續時間高於每個動畫的總和，否則它會開始自己踩踏。你介意看看我編輯的代碼來解決我的問題嗎？ – 2010-05-04 21:01:00

我還沒有測試此代碼，但你有沒有嘗試過這樣的：

var x = ["one", "two", "three"]; 
function animate(e, init){ 
    e.data("index", (init ? 0 : e.data("index") + 1)); 
    e.html(x[e.data("index")]); 
    e.animate({ key: val }, { duration: 500, complete: function(){ 
     if ($(this).data("index") < x.length - 1) { 
      animate($(this)); 
     } 
    }}); 
} 
$(".toAnimate").each(function(){ 
    animate($(this), true); 
});

當然，還有是遞歸，但也許沒有你希望消除的那種？不幸的是，它可能最終會成爲受瀏覽器限制的東西。（雖然，我想不出爲什麼有較長.queue("fx")本身會影響性能。）

此外，如果你設置它（x）使用索引對象有可能是不同的每個.toAnimatex值。

來源

2010-05-03 23:00:50 JKS

設置動畫功能的結束。如果你想執行'N'動畫創建一個數組並添加'N'元素。每次您執行動畫函數slice（）的結束時關閉其中一個數組元素。當它是空的，然後你完成了，否則開始下一個動畫。

來源

2010-05-04 21:29:48 Jay

鏈接使用遞歸崩潰的瀏覽器

回答

相關問題