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

Question

I created a recursive function, which animate an object with some mathematical laws:

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))


}   

It works perfect for one object:

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

But when I tried to call this function for two objects - I faced with a trouble - it always works for one object. Another object don't animate:

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

Can you explain plese - why? How to make it work simultaneously for several objects?

HTML is:

<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

You need to wrap the recursive call inside an anonymous function, otherwise it is executed immediately when animate states. It is purely because the animations are queued for the same element that it even works for one item:

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

eg

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


}   

Note: Accessing a global variable for the loop will cause you problems. You should pass a countdown as well and pass countdown-1 to the recursive calls. I am not sure what some of your other variables are doing, so you may be able to remove more code now:

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


}   

and use like this (to run each with 5 animations):

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