Queue function call in javascript

Question

I have functions that contain timed animation and i want these functions to run one after the other just when the previous one is done.

function a() {
    var i = 0;
    var x = setInterval(function () {
        console.log('a' + i);
        if (i == 3) {
            console.log('Done @' + i);
            clearInterval(x);
            return true;
        }
        i++;
    }, 1000);
}

function b() {
    var c = 0;
    var y = setInterval(function () {
        console.log('b' + c);
        if (c == 1) {
            console.log('Done 2 @' + c);
            clearInterval(y);
            return true;
        }
        c++;
    }, 1000);
}

a().then(b());

I tried one here but it's not working. Here's the fiddle.

What i want to achieve is like this:

a0

a1

a2

a3

Done @3

b0

b1

Done 2 @1

but it stops at Done @3. Im looking for any other ways to achieve this.

a() needs to return an object with a then method (a promise) for your code to work. Your implementation returns nothing, so then does nothing and b() is never called. — mingos
– mingos, Commented Jul 21, 2014 at 7:55

Krzysztof Safjanowski · Accepted Answer · 2014-07-21 08:09:55Z

1

If you want to call then method – function must return promise, after then you don’t want to immediate call b() but pass reference to it a().then(b);

function a() {
    var i = 0;
    var defer = $.Deferred();
    var x = setInterval(function () {
        console.log('a' + i);
        if (i == 3) {
            console.log('Done @' + i);
            clearInterval(x);
            defer.resolve('asdasd');
        }
        i++;
    }, 1000);
    return defer;
}

function b() {
    var c = 0;
    var y = setInterval(function () {
        console.log('b' + c);
        if (c == 1) {
            console.log('Done 2 @' + c);
            clearInterval(y);
            return true;
        }
        c++;
    }, 1000);
}
a().then(b);

jsfiddle: http://jsfiddle.net/Lungx/3/

answered Jul 21, 2014 at 8:09

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Mitchell · Accepted Answer · 2014-07-21 08:00:37Z

Two simpler approaches that should generally work, though maybe not in your case.

(1) jQuery. If you're using the jQuery animate() function, then you can set each animation in the callback for the animation previous. That way when animation n finishes, your callback function will start the animation for n+1, etc. There is a discussion and a couple examples here.

(2) If you're animating (or transitioning, really) CSS, you can attach a handler to the transitionend event. That way, similar to the first approach, you can have the next transition begin as soon as the previous transitionend event fires. See here, especially under the header "Detecting the completion of a transition."

I've used the first approach before, and I don't see any reason why the second shouldn't work. I hope this helps. Let me know if it doesn't work; I'm curious.

Collectives™ on Stack Overflow

Queue function call in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related