Как сделать задержку между последующим добавлением html в div, используя Jquery или javascript?

Question

В моем приложении я сталкиваюсь с некоторой проблемой с настройкой задержки при добавлении HTML в div в массиве. (в следующий раз). Пожалуйста, смотрите следующий код. 10 раз я добавляю текст " Hello World" в div. Я хочу некоторую задержку после каждого добавления.

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

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

Я пытался так:

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

Но это не работает. Как я могу это сделать.

Answer 1

Попробуй это:

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/

Заметка 1000 * i увеличение тайм-аута, делает свое дело.

Answer 2

setInterval или же setTimeout лучший способ сделать это, но вы также можете использовать jQuery delay():

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

jsFiddle

Answer 3

Вы можете попробовать использовать setInterval...

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

}, 1000);

Answer 4

Некоторое обновление вашей функции:

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

Помните, что при создании многих setTimeouts это влияет на производительность.

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

Answer 5

Вы хотите использовать setIntervalне setTimeout, setInterval выполнит функцию, подождет N миллисекунд, затем выполнит ее снова. setTimeout просто задерживает N миллисекунд, затем выполняет один раз.

var count = 0;

var interval = setInterval(function () {
    addElement();
    count++;
    if (count >= 10) {
        clearInterval(interval);
    }
}, 1000);