javascript - 使用超时逐步将字符串从数组添加到 html 元素

Question

我正在尝试每隔 500ms 向 html 元素添加一个字符串，使用 for 循环将字符串传递给更新目标元素的函数。

我不确定我是否以正确的方式处理这个问题，或者它是否可能，因为它只是一次显示所有字符串，而不是每隔 500 毫秒。

期望的效果是字符串显示就像有人在打字一样。

代码在下面，这里是一个 jsFiddle .

var content = "Hello, Universe!";
var split = content.split("");
var target = document.getElementsByClassName('place-here');

for (i = 0; i < split.length; i++) {
    addChar(split[i]);
}

function addChar(char) {
  if (timer) {
    clearTimeout(timer);
  }
  var timer = setTimeout(function() {
    target[0].innerHTML += char;
  }, 500);  
}

Answer 1

只是一个没有 setTimeout 的提案，但有 setInterval 和一些其他更改。

var content = "Hello, Universe!",
    target = document.getElementById('ticker'),
    i = 0,
    timer = setInterval(addChar, 500);

function addChar() {
    if (i < content.length) {
        target.innerHTML += content[i];
        i++;
    } else {
        clearTimeout(timer);
    }
}

<div id="ticker"></div>