Question

我想打印下划线直到1秒，然后打印出一个“”。 10秒后，它会停止。但它超时了我。请告诉我什么是错的，或者我想要达到的目标是不可能的。

代码：

  var buttonpress = true;
  while(buttonpress === true){
    setTimeout(function(){buttonpress = false;},10000);
    document.write("_");
    setInterval(function(){document.write(" ");},1000);
  }

我甚至试过这个：

setInterval(function(){document.write("_");},100);

Answer 1

在页面加载后使用document.write()会导致浏览器打开一个新文档，覆盖原始文档。所以不要将document.write()与计时器一起使用。（或者，如果你可以避免它，在99％的情况下你可以避免它。）

这是我想到的第一种不需要document.write()的方式：

function doStuff() {  
  var output = document.getElementById("output");
  
  var underscoreInterval = setInterval(function() {
    output.innerHTML += "_";
  }, 20); // delay of 20 for demo, could be reduced to 5 (or 0 - see note below)

  var spaceInterval = setInterval(function() {
    output.innerHTML += " ";
  }, 1000);
  
  setTimeout(function() {
    clearInterval(underscoreInterval);
    clearInterval(spaceInterval);
  }, 10000);  
}

document.querySelector("button").addEventListener("click", doStuff);

<button>Start</button>
<div id="output"></div>

也就是说，在输出的html中添加一个元素，并通过更新其.innerHTML来添加它。使用setInterval()两次，一次使用较小的延迟输出下划线，一次使用一秒延迟输出空格。然后使用setTimeout()在十秒后取消间隔。

对于短暂的延迟，我使用20ms进行演示，以便更容易看到运行时发生了什么，但是你可以将其减少到5ms - 你可以指定0ms，但是实践中没有指定小于5毫秒的点，因为浏览器将此参数舍入到5毫秒。

如果你想确保下划线的每一行长度相同，你可以只使用一个带有计数器的setInterval()。

如何连续1秒打印“_”？

1 个答案: