3

少し混乱するかもしれません:S

誰かが文字列の配列を文字に分割するのを手伝ってくれるなら。そして、タイムアウトでそれをテープで留めるよりも。DOSのように。

単一の文字列でこれを実行できますが、配列では実行できません。

これが私のコードです：

var text = new Array();
text[0] = "welcome ".split('');
text[1] = "how are u?".split('');
var delay = 20;
for (var j = 0; j < text.length; j++) {

    var txt = text[j];
    for (u = 0; u < txt.length; u++) {
        setTimeout(function () {
            $('div#console_div').append('<br />' + txt.shift());
        }, delay * j + 100);
    }
}
4

2 に答える 2

3

これは私がそれを行う方法です。ループの代わりにfor、文字列のどこにあるかに応じて異なる引数で自分自身を呼び出す再帰関数を使用します。

var text = new Array();
text[0] = "welcome ".split('');
text[1] = "how are you?".split('');
var delay = 400;

function addOneChar(i, j) {
    $('#console_div').append('<br>' + text[i][j]);
    if (j+1<text[i].length) {  // next character in the current string
        setTimeout(function() { addOneChar(i, j+1); }, delay);
    } else if (i+1<text.length) {   // start the next string in the text[] array
        setTimeout(function() { addOneChar(i+1, 0); }, delay);
    } // else quit
}

setTimeout(function() { addOneChar(0,0); });

http://jsfiddle.net/mblase75/tkEDN/

text[]単一の文字列に結合し、文字.charAt()を抽出するために使用することで、これをさらに簡素化できます。

var text = new Array();
text[0] = "welcome ";
text[1] = "how are you?";
var delay = 400;
var textstr = text.join('');

function addOneChar(i) {
    $('#console_div').append('<br>' + textstr.charAt(i));
    if (i+1<textstr.length) {
        setTimeout(function() { addOneChar(i+1); }, delay);
    } // else quit
}

setTimeout(function() { addOneChar(0); });

http://jsfiddle.net/mblase75/MYtjy/

于 2013-02-08T14:51:50.823 に答える
3

典型的な「ループ内の閉鎖」の問題があります。ループ内の JavaScript クロージャーを見てください– シンプルな実用的な例. タイムアウト コールバックが実行された時点で、txtを参照してtext[1]ください。ただし、すべてのタイムアウトは引き続き実行されるためtxt.shift()、配列内の要素よりも頻繁に呼び出しています。

もう 1 つの問題は、最大 100 ミリ秒の遅延は人間にはほとんど気付かれないため、増加が見られないことです。さらに悪いことに、最初のフレーズでは、すべてのタイムアウトが (ほぼ) 同時に実行さjれます。0delay * j + 100100

一度にすべてのタイムアウトを作成するのではなく、各文字を 1 つずつ処理することをお勧めします ( Blazemonger のソリューションは同じですが、クリーンであるため理解しやすいことに注意してください)。

var text = [...];

function printLetter(phrase_index, letter_index) {
    var word = text[phrase_index];
    if (word) {
        if (letter_index === word.length) {
            printLetter(phrase_index + 1, 0);
        }
        else {
            var letter = word[letter_index];
            if (letter) {
                $('div#console_div').append('<br />' + letter);
                setTimeout(function() {
                    printLetter(phrase_index, letter_index + 1);
                }, 200);
            }
        }
    }
}

printLetter(0, 0);

デモ

于 2013-02-08T14:53:49.597 に答える