for循環中的jquery動畫函數

過去幾天我一直在爲此而苦苦掙扎。我已經閱讀了關於關閉和循環中的問題的所有內容。但是，在循環中使用jquery動畫函數並不適合我。但是，也許我不明白關閉背後的實際點，這就是爲什麼我問:) 因此，這裏的例子：for循環中的jquery動畫函數

$(document).ready(function() { 
var obj1 = $(".wraper"); 
for (var i = 0; i < 3; i++) { 
    alert("Calling animate"); 
    obj1.animate({"opacity": 0.4}, 500, function() {  
     alert("Animate finished"); 
    }); 
} 
});

我想要的序列被稱爲如下：

調用動畫
動畫完成
調用動畫
動畫完成
的呼喚imate
動畫完成

我得到的是：

調用動畫
調用動畫
動畫完成
調用動畫
動畫完成
動畫完成

現在，閱讀關於閉包之後，我會說這不是同一個問題，所有的答案都在這些情況下使用，通常它涉及到在函數聲明中使用計數器i，但是這裏涉及到命令中調用的回調，我不知道如何jquery庫調用動畫回調，任何人都可以幫助我呢？

注：如果使用這樣的：

$(document).ready(function() { 
     var obj1 = $(".wraper"); 
     for (var i = 0; i < 3; i++) (function(n) { 
      alert("Calling animate"); 
      obj1.animate({"opacity": 0.4}, 500, function() { 
       alert("Animate finished"); 
      }); 
     })(i); 
    }

因此，使得每次迭代爲自執行功能塊（？這就是我的理解，請糾正我，如果我錯了），我得到與上面相同的結果！

來源

2016-02-24 Domagoj Pordan

循環立即運行，因此，所有的'animate'功能立即開始，在同一時間，可能有幾毫秒的差別。由於JavaScript定時器不是很準確，因此jQuery的'animate（）'將無法維持回調的順序，因爲它不準確到幾毫秒。 – adeneo

'animate'是異步的。您的循環正在工作，但所有動畫同時運行。如果您想等待，則必須在回調中執行下一個動畫，並在前一個回調中執行下一個動畫，依此類推。但是有一些方法可以避免回調地獄。 – elclanrs

@ adeneo：那麼你說回調是基於計時器還是？動畫結束後，我認爲它是以分辨的方式被解僱？ –

而不是爲循環中，您可以使用遞歸的匿名函數：

var i = 0; 
(function recur() { 
    if (i < 3) { 
     i++; 
     alert("Calling animate"); 
     obj1.animate({"opacity": 0.4}, 500, function() {  
      alert("Animate finished"); 
      recur(); 
     }); 
    } 
})();

來源

2016-02-24 21:09:46 jcubic

謝謝jcubic，它的工作原理！我明白了，所以我們實際上在這裏指出，只有在執行回調後纔會執行下一個迭代，太棒了！ –

@ user1809732如果它解決了您的問題，請不要忘記標記答案。 – jcubic

for循環中的jquery動畫函數

回答

相關問題