Question

可能有点令人困惑：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);
    }
}

Answer 1

我就是这样做的。而不是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/

Answer 2

你有典型的“循环闭合”问题。看看JavaScript closure inside loops – simple practical example。在执行超时回调时，txt引用text[1]。所有超时仍然执行，因此您比数组中的元素更频繁地调用txt.shift()。

另一个问题是，任何人都难以察觉任何延迟到100毫秒的延迟，所以你看不到任何增量。更糟糕的是，对于第一个短语，所有超时都在同一时间（几乎）执行，因为j为0而delay * j + 100将导致100。

您最好逐个处理每个字母，而不是一次创建所有超时（注意Blazemonger's solution是相同的，但更容易理解，因为它更清晰）。

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

DEMO

如何在数组javascript中使用split（）和setTimeout（）

2 个答案: