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

Posted 2023-05-07

【中文标题】如何使用 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]

【发布时间】：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。

***.com/questions/750486/…

【参考方案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();
);