jquery一个一个显示字母超时答案

【问题标题】：jquery display letter one by one with time outjquery一个一个显示字母超时
【发布时间】：2022-01-19 18:35:15
【问题描述】：

我尝试拆分所有字母并在超时时一一显示。我找到了一些解决方案，但它们似乎不适合我。

此脚本会附加一个完整的层（单词），但会跳过每个循环。消息是一个名为 Hello! 的字符串！

Plugin.prototype.message = function(message) {
    var word = '<div class="word">';
    var letters = message.toString().split('');

    $.each(letters, function (i, letter) {
        //alert displays letter properly one by one
        setTimeout(function () {
            word += letter;
        }, 30);

    });

    word += '</div>';
    $('#chat-layer').append(word);
    $('.word').animate({
        opacity: 1
    }, 200 );
}

有没有人知道如何解决这个问题？

【问题讨论】：

好吧，word += letter 只是将letter 添加到word；它不会更新 HTML。您需要在循环中更新 HTML。
如上：您只有在更改了 html 后才创建单词。它不是“跳过每个循环” - 它稍后会运行内容，正如您使用 setTimeout 所请求的那样。您需要一次将每个字母添加到 html 中，而不是一次添加一个单词。这是您的代码更新为一次 1 个字母：jsfiddle.net/uyv4c1bs

标签： jquery each letter

【解决方案1】：

我只是制作这段代码来演示逐字母输出的计时器的链式执行（在您的示例中，所有计时器将在 30 毫秒后异步调度）。

<html>
<body>
<div id="output">
</div>
<script>
    var str = new String("The new string to display letter by letter"); // display this string
    var interval = 500; // interval for each letter in ms
    var letters = str.split("");
    var cnt = 0;
    
    var f = function(){
        document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + (letters[cnt] == " " ? "&nbsp;" : letters[cnt]);
        if (cnt++<(letters.length-1)) {
            setTimeout(f, interval);
        }
    }
    f(); // first invoke
</script>
</body>
</html>

【讨论】：