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 回答