jQuery change divs html with pauses

Question

Possible Duplicate:
Javascript sleep
How to delay execution in between the following in my javascript

Hi i want to change html of two divs. But have pause between it

$(#div1).html('Div1 content');
$(#div2).html('Div2 content');
//wait 5 seconds
$(#div1).html('Div1 new content');
//wait 5 seconds
$(#div2).html('Div2 new content');

possible duplicate of [Javascript sleep](http://stackoverflow.com/questions/951021/javascript-sleep) and (closer related) [How to delay execution in between the following in my javascript](http://stackoverflow.com/questions/5990725/how-to-delay-execution-in-between-the-following-in-my-javascript) — Felix Kling, May 09 '12 at 12:44

score 3 · Accepted Answer · answered May 09 '12 at 12:45

3

A quick way to do it would be to chain a couple setTimeout()s.

$('#div1').html('Div1 content');
$('#div2').html('Div2 content');

setTimeout(function () {
    $('#div1').html('Div1 new content');

    setTimeout(function () {
        $('#div2').html('Div2 new content');
    }, 5000);

}, 5000);

_{Don't forget to quote your $() selectors, too.}

answered May 09 '12 at 12:45

Rob Hruska

118,520
32
167
192

Thank you. I've used setTimeout before, but not in the right way :) – dr0zd May 09 '12 at 12:51

score 2 · Answer 2 · answered May 09 '12 at 12:44

2

You can use the setTimeOut() function

answered May 09 '12 at 12:44

romainberger

4,563
2
35
51

2

It's actually `setTimeout(function () {}, delay)` – paulslater19 May 09 '12 at 12:44
1

And you actually want `setInterval` most likely. – Elliot Bonneville May 09 '12 at 12:44
Yes sorry it's setTimeout, but no I don't want setInterval. He wants a delay, not a loop – romainberger May 09 '12 at 12:45
@ElliotBonneville `setInterval` will make it happen periodically. I think @gv0zd wants it to happen just once – paulslater19 May 09 '12 at 12:45
Yes, but he'd store the setInterval then clear it after X loops. `setTimeout` works too, I suppose. – Elliot Bonneville May 09 '12 at 12:46
@ElliotBonneville: Why do you think anyone wants to loop? – Felix Kling May 09 '12 at 12:46
1

why does everybody write anything to confuse all others? – p0rter May 09 '12 at 12:47
@FelixKling it's a pretty concise way of calling a function a few times such that he won't have to chain 5 `setTimeout`s. – Elliot Bonneville May 09 '12 at 12:47
1

@ElliotBonneville: Who is talking about five `setTimeout`s? Sure, you can use `setInterval` if you want to do the *same thing* periodically, but that is not the case here at all. OP has two different statements he wants to delay... – Felix Kling May 09 '12 at 12:49
Looks like what @RobHruska was doing, which could lead a beginner to writing that out five times instead of using a recursive function or something. Edit: Yes, I see that now. My bad. It's not a very extendable pattern, though... – Elliot Bonneville May 09 '12 at 12:50

arun · Answer 3 · 2012-05-09T12:59:32.090

0

$(document).ready(function() {
$('#div1').html('Div1 content');
$('#div2').html('Div2 content');

//wait 5 seconds   
$('#div1').delay(5000)
    .queue(function(n) {
        $(this).html("Div1 new content");       
    });

//wait another 5 seconds
$('#div2').delay(10000)
    .queue(function(n) {
        $(this).html("Div2 new content");       
    });
});

edited May 09 '12 at 12:59

answered May 09 '12 at 12:45

arun

3,667
3
29
54

jQuery change divs html with pauses

3 Answers3