JS中循环的定时

Question

我用JS编写了这段代码：

function startFunction() {
p1 = document.getElementById('p1').innerHTML;
for (var i=1; i<=p1.length; i++) {
        alert(p1.slice(0, i));
    }
}

我在html中使用onload事件调用函数：

    <body onload="startFunction()">

这是带有p1 id的段落：

    <p id="p1">Hi, I'm</p>

如何使for循环延迟。我要我的程序逐个字母地写p1文本。

Answer 1

您不能也不应该延迟循环中的任何内容，因为这就是生成没有响应的页面的方法:浏览器在JavaScript代码返回之前不会对用户操作做出反应或做任何可见的事情。

相反，您可以使用一些计时器，比如setInterval()。

​

function startFunction() {
    var p1 = document.getElementById('p1');
    var txt = p1.innerHTML;
    var i=0;
    var timer = setInterval(function() {
        p1.innerHTML = txt.slice(0,i++);
        if(i>txt.length) {
            clearInterval(timer);
        }
    },500);
}

startFunction();

<p id="p1">Hi, I'm</p>

​

Answer 2

var alertEachLetter =function(p1, i){
    setTimeout(function(){
        alert(p1.slice(0, i));
    },1000);
};

 function startFunction() {
 p1 = document.getElementById('p1').innerHTML;
 for (var i=1; i<=p1.length; i++) {
        alertEachLetter(p1, i);
    }
}

为什么要创建这个alertEachLetter函数。为此，您需要检查此链接

setTimeout in for-loop does not print consecutive values

Answer 3

你不需要循环，你需要一个interval。Javascript的interval特性将(大约)按请求的间隔调用您的函数。因此，例如：

function startFunction() {
  var p1 = document.getElementById('p1').innerHTML
  var count = 1
  var finished = p1.length
  var iv = setInterval(function() {
    alert(p1.slice(0,count++))
    if (count > finished) {
      clearInterval(iv) // stops the interval from firing once we finish our task
    }
  }, 1000) // 1000 ms, or every second.
}