javascript - 如何使用 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

对您的功能进行一些升级：

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

请记住，当创建许多setTimeouts 时，它会影响性能。

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

Answer 4

你会想要使用setInterval' not setTimeout。setInterval将执行一个函数，等待 N 毫秒，然后再次执行它。setTimeout只是延迟 N 毫秒，然后执行一次。

var count = 0;

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

Answer 5

您可以尝试使用 setInterval ...

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

}, 1000);