javascript - setTimeout 和递归 IFFE，嵌套!？如何计算延迟。

Question

这个问题确实让我想起了我对 JS 技能的了解......:(

我觉得我正处于风口浪尖，但我很难理解概念上要做什么，这与其说是语法问题，不如说我觉得我几乎破解了它。

我需要什么

• 我正在尝试 console.log 一系列字符串，一次一个字母。
• 每个 LETTER 输出之间需要有一个延迟，比如 300ms。
• 每个 STRING 输出之间必须有一个延迟，例如 2000 毫秒。
• 示例数组中有 2 个字符串，但解决方案必须支持动态数量的字符串。

我当前的代码(可以粘贴到控制台中)

var stringList = ['first test','second test'],
    stringListLen = stringList.length;      

for(var i = 0; i < stringListLen; i++){

    // begin with first string and read it's length for iterations        
    var stringNumber = 0;
    var currentString = stringList[stringNumber];
    var currentStringLen = currentString.length;

    // just see the word for clarification at this point in code
    console.log(currentString);


    (function (i) {
        setTimeout(function () {                

            for (var j = 0; j < currentStringLen; j++) {

              (function (j) {
                setTimeout(function () {

                    // THE MAGIC HAPPENS HERE
                    console.log(j, currentString.charAt(j));

                    // End of string, so read next string, reset letter count
                    if(j === currentStringLen - 1){
                        stringNumber++;
                        currentString = stringList[stringNumber];
                        j = 0;                      
                    }

                }, 300 * j); // each letter * specified delay
              })(j);
            };

        }, currentStringLen * 300 * i); // letter * delay * letters in word
    })(i);      


}

问题

好处:我成功地获得了输出字母之间的短暂延迟，并且当我们到达第一个单词的末尾时，我切换到新单词并重置字母计数器的检查正在工作......

坏处:我无法让两个词之间的等待发挥作用。我尝试了一些想法，但让自己很困惑，我不知道我现在的方法是否正确。

丑陋的:最后一个术语的最后一个字母也没有输出，这完全出乎意料。

我尝试过的。

好吧，我尝试简单地将“currentStringLen * 300 * i”元素更改为各种看似合乎逻辑的组合，但没有更好或更坏的效果。最终我想我正在尝试计算“等待当前字符串中的字母数乘以 300(字母延迟)*”<---- STRIKETHROUGH...

我实际上不知道我在计算什么，这就是问题所在。

我现在想我想把它分成两个函数，而不是两个嵌套函数。一个读取字符串并将其传递给另一个函数，该函数仅在短时间内输出字母，然后一旦到达最后一个字母，它就会调用第一个函数，询问下一个单词。但是我仍然需要递归数组中的字符串数量，这会产生相同的问题......

我是否遗漏了一些基本的东西？

Answer 1

这大概是您的想法吗？

function printLetters(stringList) {
    var wordIndex = 0,
        letterIndex = 0;

    printNext();

    function printNext() {
        var word = stringList[wordIndex];
        var letter = word.charAt(letterIndex);

        console.log(letter);

        ++letterIndex;

        if (letterIndex === word.length) {
            letterIndex = 0;
            ++wordIndex;

            if (wordIndex < stringList.length) {
                setTimeout(printNext, 2000);
            }
            
            return;
        }

        setTimeout(printNext, 300);
    }
}

printLetters(['first test', 'second test']);

这里一次只有一个 setTimeout 运行，并且根据需要在适当的时间设置一个新的。

虽然我不建议同时运行多个计时器，但这是可以做到的。像这样的事情:

function printLetters(stringList) {
    var letterCount = 0,
        startTime = Date.now();

    stringList.forEach(function(word, wordCount) {
        word.split('').forEach(function(letter) {
            setTimeout(function() {
                console.log(letter, Date.now() - startTime);
            }, wordCount * 1700 + (letterCount * 300));

            ++letterCount;
        });
    });
}

printLetters(['first test', 'second test']);

在这里，我在日志记录中包含了时间增量，以便更好地了解何时发生的情况。字符串之间的间隙是 2000，但代码中的常量是 1700，因为已经添加了 300。