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

我试图每隔

500ms

向html元素添加一个字符串，使用

for

循环将字符串传递给更新目标元素的函数

我不确定我的方法是否正确，或者是否可能，因为它只是一次显示所有字符串，而不是每500毫秒显示一次

所需的效果是，字符串显示时就像有人在键入一样

下面是代码，下面是一个示例

var content=“你好，宇宙！”；
var split=content.split（“”）；
var target=document.getElementsByClassName（'place-here'）；
对于（i=0；i

问题是所有超时功能同时启动（以500毫秒为单位）。通过将interval与数组中字符的索引相乘，可以计算不同的超时：

for (i = 0; i < split.length; i++) {
    addChar(split[i], i);
}
function addChar(char, i) {
    setTimeout(function () {
        target[0].innerHTML += char;
    }, 500 * i);
}

for（i=0；i

只是一个没有

setTimeout

的提案，但是有

setInterval

和一些其他更改

var content=“你好，宇宙！”，
target=document.getElementById（'ticker'），
i=0，
定时器=设置间隔（addChar，500）；
函数addChar（）{
如果（i

---

您可以混合使用setInterval和shift来执行此操作：

var target = document.getElementsByClassName('place-here');

function display(element, string, timer) {

  var split = string.split("");

  var interval = setInterval(function() {
    element.innerHTML += split.shift()

    if (split.length == 0) {
      clearInterval(interval);
    }
  }, timer)
}

display(target[0], "Hello, Universe!", 500)

---

我为您制作了一个可以工作的javascript代码，您可以将其粘贴到您的小提琴中。您的问题是您同时调用setTimetout all，因此在500毫秒后，所有操作都会执行，而不是等待另一个完成

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

console.log(split);
addChar(0);


function addChar(i) {
    var currentChar = split[i];
  console.log(i);
  console.log(currentChar);
    setTimeout(function() {
    if(typeof currentChar !== 'undefined'){
        target[0].innerHTML += currentChar; 
        addChar(i+1);
    }
  }, 1000); 
}

---

为什么不使用

setInterval（）

：

这是一个

代码如下：

var content=“你好，宇宙！”；
var split=content.split（“”）；
var target=document.getElementsByClassName（'place-here'）；
变量长度=split.length；
var计数=0；
var timer=setInterval（函数（）{
addChar（拆分[计数]）；
计数++；
如果（计数>=长度）清除间隔（计时器）；
}, 500);	
函数addChar（char）{
目标[0]。innerHTML+=char；
}

---

我对您的JSFIDLE做了一些更改：

var content=“你好，宇宙！”；
var split=content.split（“”）；
var target=document.getElementsByClassName（'place-here'）；
函数addChar（str，i）{
如果（i

addChar函数使用setTimeout（）调用自身，递增变量i，以便下次从内容中获取另一个字符

---

请注意，setTimeout（）第一个参数是对函数的引用，在本例中，只有“addChar”没有“（）”。函数的参数从第三个参数开始，然后依次类推

所有超时都设置在同一开始时间。在没有间隙的情况下，它们都会在您设置它们500毫秒后同时（或多或少）触发。

timer

变量在该上下文中始终未定义

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

console.log(split);
addChar(0);


function addChar(i) {
    var currentChar = split[i];
  console.log(i);
  console.log(currentChar);
    setTimeout(function() {
    if(typeof currentChar !== 'undefined'){
        target[0].innerHTML += currentChar; 
        addChar(i+1);
    }
  }, 1000); 
}

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

function addChar(str, i) {
  if(i < str.length) {
        target[0].innerHTML += str[i];
        setTimeout(addChar, 500, str, ++i); 
  }
}
setTimeout(addChar(content, 0), 500);