Question

我创建了一个递归函数，用一些数学定律为对象设置动画：

var pi = Math.PI; 
var divisions = 36;
var inc = pi/divisions;
var t=pi/2;
var i = 0;
var loopNumber = 0;
var time = 50;


function updateTime(obj, alp)       {

    obj = obj;
    alpha = alp;

    x1 = //some mathematical calculations, x1 = f (t, alpha);
    y1 = //some mathematical calculations, y1 = f (t, alpha);

    if (loopNumber ==5) {
        obj.stop();
        return
    }

    if (i == divisions*2) {
        t=pi/2;
        i=0;
        loopNumber++;
    }

    t+= inc;    
    i++

    obj.animate({
        top: y1,
        left: x1,
    }, time, 'linear', updateTime(obj, alpha))


}

它适用于一个对象：

$(window).load( function() {
        updateTime($('#runner1'), pi/4);
    }
)

但是当我试图为两个对象调用此函数时 - 我遇到了麻烦 - 它总是适用于一个对象。另一个对象没有动画：

$(window).load( function() {
        updateTime($('#runner1'), pi/4);
        updateTime($('#runner2'), -pi/4);
    }
)

你能解释一下 - 为什么？如何让它同时为多个对象工作？

HTML是：

<div id="runner1" style="height: 20px; width: 20px; border-radius: 10px; box-shadow: 0 0 13px gold; background-color: cyan; z-index: 1; position: absolute; margin-left: -10px;  margin-top: -10px;"> </div>
<div id="runner2" style="height: 20px; width: 20px; border-radius: 10px; box-shadow: 0 0 13px red; background-color: violet; z-index: 1; position: absolute;  margin-left: -10px;  margin-top: -10px;"> </div>

Answer 1

您需要将递归调用包装在匿名函数中，否则在动画状态时立即执行。这纯粹是因为动画排队等同于它甚至适用于一个项目的元素：

    obj.animate({
        top: y1,
        left: x1,
    }, time, 'linear', function(){updateTime(obj, alpha);})

e.g。

function updateTime(obj, alp)       {

    obj = obj;
    alpha = alp;

    x1 = //some mathematical calculations, x1 = f (t, alpha);
    y1 = //some mathematical calculations, y1 = f (t, alpha);

    if (loopNumber ==5) {
        obj.stop();
        return
    }

    if (i == divisions*2) {
        t=pi/2;
        i=0;
        loopNumber++;
    }

    t+= inc;    
    i++

    obj.animate({
        top: y1,
        left: x1,
    }, time, 'linear', function(){updateTime(obj, alpha);})


}

注意：访问循环的全局变量会导致问题。您也应该通过倒计时并将countdown-1传递给递归调用。 我不确定您的其他变量正在做什么，因此您现在可以删除更多代码：

function updateTime(obj, alp, countdown)       {

    obj = obj;
    alpha = alp;

    x1 = //some mathematical calculations, x1 = f (t, alpha);
    y1 = //some mathematical calculations, y1 = f (t, alpha);

    if (!countdown) {
        obj.stop();
        return
    }

    if (i == divisions*2) {
        t=pi/2;
        i=0;
    }

    t+= inc;    
    i++

    obj.animate({
        top: y1,
        left: x1,
    }, time, 'linear', function(){updateTime(obj, alpha, countdown-1);})


}

并像这样使用（运行5个动画）：

$(window).load( function() {
        updateTime($('#runner1'), pi/4, 5);
        updateTime($('#runner2'), -pi/4, 5);
    }
)

同时调用两个对象的递归函数

1 个答案: