如何使用 Javascript 分解 HTML 字符串中的每个单词，然后在 HTML 中一个一个地显示每个单词？ [复制]答案

【问题标题】：How to use Javascript to break up each word in a HTML string and then show each word back one by one in HTML? [duplicate]如何使用 Javascript 分解 HTML 字符串中的每个单词，然后在 HTML 中一个一个地显示每个单词？ [复制]
【发布时间】：2019-07-14 17:25:20
【问题描述】：

我想获取 div 的 innerHTML，然后将字符串拆分为单词并更改相同的 innerHTML 以逐个显示每个单词，中间有延迟。我下面的代码目前不起作用：

document.addEventListener("click", function() {
    var text = document.getElementById("article-text");
    var textSplit = text.innerHTML.split(" ");
    function timeoutFunction()
    {
        for (var i = 0; i < textSplit.length; i++) setTimeout(function () {
            text.innerHTML = textSplit[i];

        }, 500);
    }
    timeoutFunction();
});

【问题讨论】：

浏览器控制台是否显示任何错误？
臭名昭著的for循环问题和所有超时同时运行
for 循环不会等待 setTimeout()。你可以乘i + 1 * 500。
stackoverflow.com/questions/750486/…

标签： javascript html loops dom innerhtml

【解决方案1】：

使用递归呢？调用同一个函数并传递索引，当索引到达循环结束时，递归结束

document.addEventListener("click", function() {
    var text = document.getElementById("article-text");
    var textSplit = text.innerHTML.split(" ");

    function timeoutFunction(index){
        text.innerHTML = textSplit[index];
        // Recursion
        if(index < textSplit.length - 1){
            setTimeout(function(){
                timeoutFunction(index + 1);
            }, 500);
        }
    }


    timeoutFunction(0);
});

【讨论】：

【解决方案2】：

一开始你以为调用多个setTimeouts效果会如你所愿，但实际上并非如此。

另一种方法是将毫秒与索引i 相乘以实现效果。还有一件事，您应该使用语句let 来保持索引i 的范围。

document.addEventListener("click", function() {
  var text = document.getElementById("article-text");
  var textSplit = text.innerHTML.split(" ");

  text.innerHTML = '';

  function timeoutFunction() {
    for (let i = 0; i < textSplit.length; i++) {
      setTimeout(function() {
        text.innerHTML += ' ' + textSplit[i];
      }, 500 * i + 1);
    }
  }
  
  timeoutFunction();
});

Click on this screen!
<div id='article-text'>Ele from Stack</div>

【讨论】：

【解决方案3】：

只需将数组用作队列并工作直到完成。 .shift() 从数组中拉出下一项。

document.addEventListener("click", function() {
    var text = document.getElementById("article-text");
    var textSplit = text.innerHTML.split(" ");
    var runUp = text.innerHTML = '';
    function timeoutFunction()
    {
        runUp += ' ' + textSplit.shift();
        text.innerHTML = runUp;
        if (textSplit.length) setTimeout(timeoutFunction, 500);
    }
    timeoutFunction();
});

【讨论】：