Why javascript setTimeout does all at once?

Question

I've got this code and I don't know why all the functions in the loop are called at once!

this.line = function($l) {
    var $this = this;
    $this.$len = 0;
    $('.active').hide(0,function(){             
        $this.$len = $l.length;
        var j = 1;
        $.each($l,function(i,item){
            var t = setTimeout(function(){
                $this._echoLine($l[i]);
                clearTimeout(t);
                if (j >= $this.$len) $('.active').show();
                j++;
            },500*j);
        });
    });
}

Alnitak · Accepted Answer · 2012-05-18 10:48:36Z

3

It's because you only increment j inside the timeout function, but the delay (which depends on j) is still 1 at the time the timeout handler is registered.

Seeing as you have a loop index variable anyway (i), try this:

$l.each(function(i, item) {
    setTimeout(function() {
        $this._echoLine($l[i]);
    }, 500 * (i + 1));
});

// a separate timeout to fire after all the other ones
setTimeout(function() {
    $('.active').show();
}, ($l.length + 1) * 500);

There's no need for the clearTimeout line, so no need to declare or store t either.

edited May 18, 2012 at 10:48

answered May 18, 2012 at 10:25

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

9 Comments

Arash R Over a year ago

I need to be sure if the function in the timeout is called! How can I do that?

Felix Kling Over a year ago

@XIII: What does this have to do with how quickly the timeouts are called? Maybe you should explain what you are actually trying to do. Asking for a solution to a problem is often better than asking for a solution to a solution.

Arash R Over a year ago

I need to call a queue of functions one after another and I can't use callbacks.

Alnitak Over a year ago

@XIII why can't you use callbacks? That's the only way to trigger an action for "later" in Javascript. Your existing code is using callbacks anyway!

Arash R Over a year ago

It's a kind of animation. But in my code, it all runs in the same time!

|

Zonf · Accepted Answer · 2012-05-18 10:43:14Z

0

Hope it works.

this.line = function($l) {
    var $this = this;
    $this.$len = 0;
    $('.active').hide(0,function(){             
        $this.$len = $l.length;
        var j = 1;
        $.each($l,function(i,item){
            var t = setTimeout(function(){
                $this._echoLine($l[i]);
                clearTimeout(t);
                if (j >= $this.$len) $('.active').show();
                j++;
            });
        });
    });
}

setTimeout(function() { this.line(); }, 500);

edited May 18, 2012 at 10:43

answered May 18, 2012 at 10:26

Zonf

671 silver badge8 bronze badges

5 Comments

Felix Kling Over a year ago

You don't pass any time to the inner timeout... on purpose?

Arash R Over a year ago

I don't understand this concept!

Alnitak Over a year ago

@XIII don't worry, it's not just you. this code doesn't work.

Zonf Over a year ago

Sorry for the mistake. i edited the code. Set timeout to main function, so it should fix your issue.

Alnitak Over a year ago

@zonf no, it still won't work. Per Felix's comment, you never set a timeout on the inner call to setTimeout.

Collectives™ on Stack Overflow

Why javascript setTimeout does all at once?

2 Answers 2

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related