javascript - 理解 setTimeout

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 5 年前。

Improve this question

我一直在尝试让一系列句子在前一个句子后 2 秒出现，使用 setTimeout 显示每个句子，并使用 setInterval 重复此过程一定次数(由用户定义)。

以下示例代码显示了我的理解以及我感到困惑的地方:

	var myComments = document.getElementById("comments");
	var subtractor = 5;
	var timer, myRun;
	
	window.onload = onStart();
	
	function onStart() {
		alert("First Comment");
		myRun = setInterval(function() {
			alert("Sub = " + subtractor);
			setTimer("<p>This is a first sentence. Subtractor = " + subtractor + "</p>");
			setTimer("<p>This is a second sentence. Subtractor = " + subtractor + "</p>");
			setTimer("<p>This is a third sentence. Subtractor = " + subtractor + "</p>");
			subtractor = subtractor - 1;
			if (subtractor < 1) {
				alert("Subtractor to clear");
				clearInterval(myRun);
				}
		}, 2000);
		alert("Last Comment");
	}
	
	function setTimer(setText) {
		clearTimeout(timer);
		timer = setTimeout(function() {myComments.innerHTML = myComments.innerHTML + setText;}, 2000);
	}

<div id="comments"></div>

这些警报只是作为测试点，表明我缺乏理解:

• 为什么最后一个警报紧随第一个警报之后显示，然后是 setInterval 内的警报？ - 因为setTimeout是异步的!
• 为什么除了生成的最后一个句子之外，根本没有显示任何句子？ - 由于它们是异步的，下一个计时器会取消前一个计时器，只保留最后一个计时器。
• 我哪里出错了？如何让句子一个接一个地出现，每个句子之间有两秒的延迟？我是否将每个计时器嵌套在前一个计时器中？

抱歉，最后一个问题更多的是我自己的想法；去测试吧!

Answer 1

Why is the last alert shown immediately after the first one, and THEN the alerts from within the setInterval?

最后一个警报不在 setTimeout 或 setInterval 内，因此会立即触发。其他的都在 2000ms setTimeout 之内，所以两秒后触发(一次全部)。

Why are none of the sentences displayed at all, aside from the very last sentence generated?

您正在以相同的 2000 毫秒延迟触发三个同时的 setTimeouts，因此所有三个 setTimeout 几乎在两秒后同时触发。它们内部的clearTimeouts相互冲突(因为您重复使用相同的timer变量来跟踪它们)，这阻止了其中两个的触发。

Where am I going wrong?

对 setTimer 的每次调用都应使用不同的时间延迟，这样它们就不会同时触发。同时，setInterval 应该有足够长的间隔，以便在它设置的三个 setTimeout 完成之前不会循环。无需在 setTimout 调用上调用clearTimeout；默认情况下，它们会运行一次然后停止，这就是您想要的。您唯一需要的地方就是停止 setInterval。

您可能还想立即触发第一次迭代，因此它将立即开始，而不是等待第一个间隔完成:

var myComments = document.getElementById("comments");
var subtractor = 5;
var timer, myRun;

window.onload = onStart();

function setTimers() {
  //alert("Sub = " + subtractor);
  setTimer("<p>This is a first sentence. Subtractor = " + subtractor + "</p>", 0); // no delay
  setTimer("<p>This is a second sentence. Subtractor = " + subtractor + "</p>", 2000); // 2s delay
  setTimer("<p>This is a third sentence. Subtractor = " + subtractor + "</p>", 4000); // 4s delay
  subtractor = subtractor - 1;
  if (subtractor < 1) {
    //alert("Subtractor to clear");
    clearInterval(myRun);
  }
}

function onStart() {
  //alert("First Comment");
  myRun = setInterval(setTimers, 6000); // 6 seconds for the full interval
  setTimers(); // so you don't have to wait 6 seconds for the first run
}

function setTimer(setText, delay) {
  timer = setTimeout(function() {
    myComments.innerHTML = myComments.innerHTML + setText;
  }, delay);
}

<div id="comments"></div>