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.

Improve this question
0

5 Answers 5

Reset to default
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.

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

1 Comment

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.
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

Improve this answer

Comments

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);
Improve this answer

Comments

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/

Improve this answer

4 Comments

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.
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.
@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..
This is going to create a debugging nightmare for whatever poor programmer falls upon this code in the future.
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);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.