Question

我有以下循环，从1到100计算。

我想在这个循环中使用animate方法来平滑地移动图片，即通过改变它的顶部和左边属性。

虽然我可以让图片移动，但它可以在一个不稳定的动画中完成。我可能有点笨，但它似乎在一次击中而不是逐渐执行所有动画。

这与javascript异步有关吗？

还有一种方法我可以在Javascript中重复一些东西，即不是设置一个循环是否有一种函数可以在最后调用自己的方式，所以，例如，我可以有一个动画div的显示它不断反弹等等。目前我必须设置一个预先定义的循环。

for (i=1; i < 100; i++) {
    var FirstTop = (FirstTop + FirstTopGoal);
    var FirstLeft= (FirstLeft+ (FirstLeftGoal));
    var SecondTop = (SecondTop+ (SecondTopGoal));
    var SecondLeft = (SecondLeft + (SecondLeftGoal));
    if (FirstTop<100){Firsttop=100;FirstTopGoal    = 2 - Math.random()*4;};
    if (FirstLeft<50){FirstLeft=50;FirstLeftGoal    = 2 - Math.random()*4;};
    if (FirstTop>130){Firsttop=130;FirstTopGoal    = 2 - Math.random()*4;};
    if (FirstLeft>500){Firsttop=500;FirstLeftGoal    = 2 - Math.random()*4;};
    $("#first").animate(
        {top: FirstTop,left:FirstLeft},
        {duration: 0,
        easing: "linear"}
    );
};

Answer 1

此代码可以解决您的问题：

var i = 1;
var interval = setInterval(function(){
    if(i < 100) {
        i++;

        var FirstTop = (FirstTop + FirstTopGoal);
        var FirstLeft= (FirstLeft+ (FirstLeftGoal));
        var SecondTop = (SecondTop+ (SecondTopGoal));
        var SecondLeft = (SecondLeft + (SecondLeftGoal));
        if (FirstTop<100){Firsttop=100;FirstTopGoal    = 2 - Math.random()*4;};
        if (FirstLeft<50){FirstLeft=50;FirstLeftGoal    = 2 - Math.random()*4;};
        if (FirstTop>130){Firsttop=130;FirstTopGoal    = 2 - Math.random()*4;};
        if (FirstLeft>500){Firsttop=500;FirstLeftGoal    = 2 - Math.random()*4;};

        $("#first").animate(
            { top: FirstTop, left:FirstLeft}, 
            {duration: 0, easing: "linear"}
        );
    }
    else if(i == 100){
        clearInterval(interval);
    }
}, 1);

使用setInterval代替for循环，因为。 Here你可以在jsFiddle上看到一个例子。

如果您将延迟设置为0，则for循环也快于setInterval。这是因为setInterval的最小延迟值为4毫秒。另请看这个问题：Why setTimeout(function, 0) is executed after next operation, but not in the moment of calling?

Javascript-Jquery - for循环中的animate方法

1 个答案: