Queuing html functions

Question

I want to change the content of a div 3 times, with a delay of 1 second between each change. delay() doesn't work in this code :

$('#import-status-msg').html('Importing content ..').delay(1000).
html('Organizing content ..').delay(1000).
html('Eating burrito ..');

I get 'Eating burrito' directly. What's the shortest way to get this done?

johankj · Accepted Answer · 2012-12-25 14:44:51Z

2

Using the setTimeout-function:

setTimeout(function() {
    $('#import-status-msg').html('Importing content ..');
    setTimeout(function() {
        $('#import-status-msg').html('Organizing content ..');
        setTimeout(function() {
            $('#import-status-msg').html('Eating burrito ..');
        }, 1000);
    }, 1000);
}, 1000);

You can't use jQuery's delay()-function as that only has an effect on the standard effects queue eg. animations.

edited Dec 25, 2012 at 14:44

answered Dec 25, 2012 at 14:38

johankj

1,76716 silver badges35 bronze badges

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

Comments

Yoshi · Accepted Answer · 2012-12-25 14:48:41Z

1

a more general solution, using jquery's queue function:

var gen = function (str, delay) {
  return function (n) {
    $(this).html(str);
    setTimeout(n, delay || 1000);
  };
};

$('#import-status-msg').queue([
  gen('Importing content ..'),
  gen('Organizing content ..'),
  gen('Eating burrito ..')
]);

http://jsbin.com/oraler/1/

answered Dec 25, 2012 at 14:48

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

3 Comments

soundswaste Over a year ago

Can you explain whats happening in the setTimeout function line here?

Yoshi Over a year ago

using queue, the callbacks will be called with a next-function (the n parameter). This function will either do nothing (end of queue) or call the next callback in the queue. setTimeout is just do delay moving to the next cb in the queue.

soundswaste Over a year ago

Thanks, its very comprehensive and educative!

user1276919 · Accepted Answer · 2012-12-25 14:37:46Z

0

Use:

setTimeout(function(){},1000)

answered Dec 25, 2012 at 14:37

user1276919

5585 silver badges26 bronze badges

Comments

Taha Paksu · Accepted Answer · 2013-01-03 06:27:53Z

0

var q = ['Importing content ..','Organizing content ..','Eating burrito ..'];
$("#test").html(q[0]);
var i = 1;
var p = setInterval(function(){
    $("#test").html(q[i]);
    i++;
    if(i==q.length){
        clearInterval(p);
    }
},1000);

fiddle

edited Jan 3, 2013 at 6:27

answered Dec 25, 2012 at 14:40

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Collectives™ on Stack Overflow

Queuing html functions

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related