javascript - jquery .each 在继续循环之前等待函数完成

Question

我实际上是在尝试遍历 LI 标记的集合并插入一些文本来模拟某人编写待办事项列表的外观。它有效，但它同时写入每个列表项而不是等待。有没有一种简单的方法可以实现这一目标？我在这里设置了一个 JS fiddle :http://jsfiddle.net/fZpzT/但代码看起来像这样。谢谢。

function addListItems() {
var str = {
    listitem1:'personal background check',
    listitem2:'look into my sketchy neighbor',
    listitem3:'look up my driving record',
    listitem4:'pick up milk',
    listitem5:'wash the car'
}

$('.list-container li').each(function(){
    var z = $(this).attr('id');
    var str2 = str[z];
    var delay = 0;
    for (var i = 0; i <= str2.length; i++) {
        (function(str2){
            delay += 100 + Math.floor(Math.random()*11)*6;
            setTimeout(function(){
                appendStr(str2);       
            },delay);
        })(str2[i])
    }
    function appendStr(str2) {
      $('#'+ z).append(str2);
    }
});
}

Answer 1

使延迟累积:Demo on jsFiddle

var str = {
    listitem1: 'write the first item',
    listitem2: 'write the second item',
    listitem3: 'write the third item',
    listitem4: 'write the fourth item',
    listitem5: 'write the fifth item'
}, cumulativeDelay = 0;

$('.list-container li').each(function () {
    var z = $(this).attr('id');
    var str2 = str[z];
    var delay = cumulativeDelay;
    for (var i = 0; i <= str2.length; i++) {
        (function (str2) {
            delay += 100 + Math.floor(Math.random() * 11) * 6;
            setTimeout(function () {
                appendStr(str2);
            }, delay);
        })(str2[i])
    }
    cumulativeDelay = delay;
    function appendStr(str2) {
        $('#' + z).append(str2);
    }
    $(this).css('color', 'red');
});