使用timeout

Question

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

我不确定我是否以正确的方式接近这一点，或者它是否可能，因为它只是一次显示所有字符串而不是每500ms个字符串。

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

代码如下，此处为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>

Answer 2

问题是所有超时功能都在同一时间（500毫秒）开始。您可以通过将interval与array中的char索引相乘来计算不同的超时：

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

Answer 3

你可以混合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)

Answer 4

我为你制作了一个有效的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); 
}

Answer 5

为什么不使用setInterval()：

这是一个fiddle

代码在这里：

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


var length = split.length;
var count = 0;

var timer = setInterval(function() {
  	addChar(split[count]);
    count++;
    if(count>=length) clearInterval(timer);
}, 500);	



function addChar(char) {
	target[0].innerHTML += char;
	
}

<div class="place-here">

</div>

Answer 6

我在你的jsfiddle做了一些改变：https://jsfiddle.net/vochxa3f/10/

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

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

请注意，setTimeout（）的第一个参数是对函数的引用，在这种情况下只有＆＃34; addChar＆＃34;没有＆＃34;（）＆＃34;。该函数的参数在第3个参数和第4个参数处出现。