0

我正在尝试制作一个在运行程序时运行动画的脚本，并且我希望两者都同步。（在 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/。这个功能能解决我的问题吗？如果是这样，任何人都可以提供一个快速的解释吗？

PS我不是以英语为母语的人，如果我的措辞错误或解释不好，请见谅。

谢谢你的时间！

4

1 回答 1

0

您应该使用 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-25T05:51:54.913 回答