2

In My application I am facing some problem with setting delay when appending some html to a div within a array. (subsequent time). Please see the following code. 10 times I am appending " Hello World" text into a div. I want some delay after each append.

function someFunction(){
    for(var i=0;i<10;i++)
    {
         addElement();
    }
}

function addElement()
{
     $('.SomeDiv').append('<div>Hello World</div>');
}

I have tried like this:

 function someFunction(){
    for(var i=0;i<10;i++)
    {
        setTimeOut(function(){
            addElement();
        },1000);             
    }
}

But this is not working. How can I do this.

Hannan Hossain
  • 740
  • 1
  • 12
  • 23

5 Answers5

2

Try this:

function someFunction() {
    for (var i = 0; i < 10; i++) {
        setTimeout(function(){
            addElement();
        }, 1000 * i);
    }
}

function addElement() {
    $('.SomeDiv').append('<div>Hello World</div>');
}

http://jsfiddle.net/C4hwg/

Note 1000 * i increasing timeout, it does the trick.

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Thanks @dfsq.. It works. Can you please tell me what's the differences here?? OR any reference where I can see the documentation to see this kind of tricks. I think this could be some tricks to work setTimeout with loop. – Hannan Hossain Jul 25 '13 at 19:59
2

setInterval or setTimeout are the better way to do this, but you can also use jQuery delay():

for(var i=0;i<10;i++)
{
    $('.SomeDiv').delay(i * 1000).queue(function (next) {
        $(this).append('<div>Hello World</div>');
        next();
    });
}

jsFiddle

Daniel Gimenez
  • 18,530
  • 3
  • 50
  • 70
1

You'll want to use setInterval' not setTimeout. setInterval will execute a function, wait N milliseconds, then execute it again. setTimeout just delays N milliseconds, then executes once.

var count = 0;

var interval = setInterval(function () {
    addElement();
    count++;
    if (count >= 10) {
        clearInterval(interval);
    }
}, 1000);
cfs
  • 10,610
  • 3
  • 30
  • 43
1

You could try using setInterval...

var count = 0;
var placeHolder = setInterval(function() {
    addElement();
    count = count + 1; //i forget if ++ works...
    if(count > 9)
        clearInterval(placeHolder);

}, 1000);
Tim Mac
  • 1,149
  • 1
  • 8
  • 17
1

Some upgrade to your function:

function someFunction(){
    for(var i=0;i<10;i++)
    {
        setTimeout(function(){
            addElement();
        }, i*1000 );             
    }
}

Remember , when creating many setTimeouts it affects performance.

JSFiddle: http://jsfiddle.net/CSPbb/

Ivan Chernykh
  • 41,617
  • 13
  • 134
  • 146
  • Thanks @Cherniv.. It works. Can you please tell me what's the differences here?? OR any reference where I can see the documentation to see this kind of tricks. I think this could be some tricks to work setTimeout with loop. – Hannan Hossain Jul 25 '13 at 19:59
  • 2
    just want to point out that this adds 10 setTimeout handles (however you would describe that), whereas you really only need 1 setInterval handle to do the same thing. Personally, I think setInterval makes more sense. – Tim Mac Jul 25 '13 at 20:02
  • 1
    @HannanHossain `setTimeout` is kind of asynchronous function calls , you tell it what function you want to run and what time you want to wait before. So in your case we're creating 10 "waiters" , when first will run in 0 milliseconds (1000*0) , second in 1000 milliseconds (1000*1) , third in 2000 milliseconds and so on.. – Ivan Chernykh Jul 25 '13 at 20:08
  • 1
    This is going to create a debugging nightmare for whatever poor programmer falls upon this code in the future. – Chris Moschini Jul 25 '13 at 21:54