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

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

javascript jquery loops animation

Javascript 将JQuery动画与循环中的计算同步,javascript,jquery,loops,animation,Javascript,Jquery,Loops,Animation,我试图制作一个脚本，在运行程序时运行动画，我希望两者都同步。（在JSFiddle中更清楚：）。我正在使用JQuery和JQueryUI库代码是： Javascript $(function() { for (var i = 0; i < 5; i++) { console.log("log " + i); $("#textplaceholder").append(i + " "); $("#myDiv>div:eq(" + i + ")").delay(

我试图制作一个脚本，在运行程序时运行动画，我希望两者都同步。（在JSFiddle中更清楚：）。我正在使用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);
}
});

$（函数（）{
对于（变量i=0；i<5；i++）{
控制台日志（“日志”+i）；
$（“#文本占位符”）.append（i+”）；
$（“#myDiv>div:eq（“+i+”））.delay（1000*i）.效果（“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>


洛勒姆
乱数假文
多洛
坐着
艾米特
循环：

我做了一个循环，运行用于计算的代码——在本例中只是一个控制台.log（）和一个.append（）——以及用于动画的代码。问题是，我希望在每次迭代中都同步这两个，因此，例如，当我的动画位于第三个索引上时，代码的日志/附加不应超过3。有什么建议吗？我在这里尝试了其他答案中的递归解决方案，但不知何故，它在.animate（）和.effect上不起作用，尽管我是JQuery的初学者，所以可能我错了

在搜索的过程中，我发现了大约。这个函数能解决我的问题吗？如果是的话，有人能提供一个快速的解释吗

另外，我不是以英语为母语的人，所以如果我用错了词或者解释得不好，我很抱歉

谢谢你的时间

您应该使用setTimeout在同一时间执行所有操作，然后进行同步，而不是使用延迟

$（函数（）{
var j=0；
对于（变量i=0；i<5；i++）{
setTimeout（函数（）{
控制台日志（“日志”+j）；
$（“#文本占位符”）.append（j+”）；
$（“#myDiv>div:eq（“+j+”））.effect（“highlight”，{color:'lightblue'}，1000）；
j++；
}，1000*i）；
}
});

谢谢！工作得很有魅力。

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