Question

我正在尝试制作一个在运行程序时运行动画的脚本，我希望两者同步。（在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);
}
});

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（）和 .append（） - 并且代码为动画。问题是，我想在每次迭代中同步两个，所以例如当我的动画在第三个索引上时，代码不应该记录/追加超过3.任何建议？我在这里尝试了其他答案的递归解决方案，但不知何故它不适用于 .animate（）和 .effect ，虽然我是JQuery的初学者，所以也许我错了。

在搜索时，我发现了http://api.jquery.com/promise/。这个功能能解决我的问题吗？如果是这样，任何人都可以提供快速解释吗？

P.S。我不是母语为英语的人，如果我写错了字或说错了，那就很抱歉。

谢谢你的时间！

Answer 1

不应使用延迟，而应使用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);
    }
});

将JQuery动画与循环中的计算同步

1 个答案: