如何使用 Javascript 将 HTML 字符串中的每个单词打散，然后在 HTML 中将每个单词一一显示出来？

Question

我想获取一个 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();
});

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

Answer 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>

Answer 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();
});

如何使用 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?

html

javascript

dom

loops

innerhtml