在循環中同步JQuery動畫和計算

我試圖製作一個運行程序時運行動畫的腳本，並且我希望兩者都是同步的。（它在JSFiddle中更清晰：http://jsfiddle.net/Vhutama/Y8zNQ/5/）。我正在使用JQuery和JQueryUI庫。在循環中同步JQuery動畫和計算

的代碼是：

的Javascript

$(function() { 
for (var i = 0; i < 5; i++) { 
    console.log("log " + i); 
    $("#textplaceholder").append(i + " "); 
    $("#myDiv>div:eq(" + i + ")").delay(1000 * i).effect("highlight", {color: 'lightblue'}, 1000); 
} 
});

HTML

 <body> 
     <div id='myDiv'> 
      <div class='ui-state-default'>Lorem</div> 
      <div class='ui-state-default'>Ipsum</div> 
      <div class='ui-state-default'>Dolor</div> 
      <div class='ui-state-default'>Sit</div> 
      <div class='ui-state-default'>Amet</div> 
     </div> 
     <div id='textplaceholder'>Looping for : </div> 
     </body>

我製成，其運行用於計算的代碼的循環 - 只是一個的console.log （）和.app end（）在這個例子中 - 併爲動畫編碼。問題是，我希望在每次迭代中同時進行同步，例如，當我的動畫位於第三個索引時，代碼不應該記錄/追加超過3個。任何建議？我嘗試了其他答案的遞歸解決方案，但不知何故它不能在.animate（）和.effect，雖然我是JQuery的初學者，所以也許我可能是錯的。

雖然搜索，我發現約http://api.jquery.com/promise/。這個功能能夠解決我的問題嗎？如果是這樣，任何人都可以提供關於它的快速解釋？

P.S.我不是以英語爲母語的人，如果我提出錯誤的措詞或錯誤的解釋，我很抱歉。

謝謝你的時間！

來源

2013-04-25 Vhutama

而不是使用延遲，您應該使用setTimeout在同一時間執行所有操作，然後進行同步。

http://jsfiddle.net/FJWL4/

$(function() { 
    var j = 0; 
    for (var i = 0; i < 5; i++) { 
     setTimeout(function() { 
      console.log("log " + j); 
      $("#textplaceholder").append(j + " "); 
      $("#myDiv>div:eq(" + j + ")").effect("highlight", {color: 'lightblue'}, 1000); 
      j++; 
     }, 1000 * i); 
    } 
});

來源

2013-04-25 05:51:54 alexmngn

謝謝！像魅力一樣工作。 – Vhutama 2013-04-25 06:23:58

在循環中同步JQuery動畫和計算

回答

相關問題