8

私は基本的に、LIタグのコレクションをループし、テキストを挿入して、やるべきことのリストを書いている人の外観をシミュレートしようとしています。動作しますが、待機するのではなく、各リスト項目を同時に書き込みます。これを達成する簡単な方法はありますか？ここにJSフィドルのセットアップがあります：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);
    }
});
}
4

3 に答える 3

4

遅延を累積する：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');
});
于 2013-02-13T02:03:09.947 に答える
1

簡略化してはどうですか？2 つの変数を使用して、わずかに変更されたデータ構造の内容全体を 1 つのループで繰り返し処理します。このような。http://jsfiddle.net/cXykd/

var strings = 
[
    { "id":"listitem1", "text": "write the first item" },
    { "id":"listitem2", "text": "write the second item" },
    { "id":"listitem3", "text": "write the third item" },
    { "id":"listitem4", "text": "write the fourth item" },
    { "id":"listitem5", "text": "write the fifth item" },
 ]

var stringsIndex = 0;
var textIndex = 0;

AddString();

function AddString(){
    if (stringsIndex < strings.length){
        if (textIndex >= strings[stringsIndex].text.length)
        {
            stringsIndex++;
            if (stringsIndex == strings.length)
            {
                return;
            }
            textIndex = 0;
        }

        $("#" + strings[stringsIndex].id).append(strings[stringsIndex].text[textIndex]);
        textIndex++;

        var delay = 10 + Math.floor(Math.random()*11)*6;
        setTimeout(AddString, delay);
    }
}
于 2013-02-13T02:54:45.137 に答える