同步JQuery动画与计算在一个循环

Synchronize JQuery Animations with Calculation Within A Loop

本文关键字：一个 循环 JQuery 动画 计算 同步      更新时间：2023-09-26

我想做一个脚本，运行动画，同时运行一个程序，我想要两者同步。(在JSFiddle中更清楚:http://jsfiddle.net/Vhutama/Y8zNQ/5/)。我正在使用JQuery和JQueryUI库。

代码是:

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


       <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()和一个.append()——以及动画代码。问题是，我希望两者在每次迭代中都是同步的，因此，例如，当我的动画位于第3个索引时，代码不应该记录/追加超过3个。任何建议吗?我已经尝试了递归解决方案从其他答案在这里，但不知何故它不工作在.animate()和。效果，虽然我是JQuery的初学者，所以也许我可能是错的。

在搜索时，我发现了关于http://api.jquery.com/promise/。这个函数能解决我的问题吗?如果有，谁能快速解释一下?

注:我不是以英语为母语的人，所以如果我说错了词或解释不好，我很抱歉。

谢谢你的时间!

不应该使用延迟，而应该使用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);
    }
});
相关文章：