如何使用Jquery或javascript在后续将html追加到div之间延迟

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 );             
    }
}

请记住，创建多个setTimeout时会影响性能。

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);