使用" setTimeout()"时执行的顺序是什么?

时间:2017-07-16 16:06:28

标签: javascript

我使用window.open()创建了一个空白窗口 我添加了一个字符串"等一下......" 3次,延迟1秒 在添加字符串之前,我记录了窗口的正文。

窗口显示了我预期的字符串,但控制台日志不是。

登录

tmp.html:20 <body>​<h1>​Wait a minute...​</h1>​<h1>​Wait a minute...​</h1>​<h1>​Wait a minute...​</h1>​</body>​
tmp.html:20 <body>​<h1>​Wait a minute...​</h1>​<h1>​Wait a minute...​</h1>​<h1>​Wait a minute...​</h1>​</body>​
tmp.html:20 <body>​<h1>​Wait a minute...​</h1>​<h1>​Wait a minute...​</h1>​<h1>​Wait a minute...​</h1>​</body>​

现在我想知道为什么结果会这样发生。
使用setTimeout()时,浏览器会忽略延迟并执行计时器功能,但更新视觉内容的代码除外。是不是?

&#13;
&#13;
<button onclick="func1()">Result</button>
<script>
	function func1() {
		var newWindow = window.open('about:Blank', 'newWindow',
			'width=480, height=272, resizable=1', true);
		if (newWindow) {
			var i = 3;
			var func = function () {
				var node = document.createElement('h1');
				node.appendChild(document.createTextNode("Wait a minute..."));
				console.log(newWindow.document.getElementsByTagName('body')[0]);
				newWindow.document.getElementsByTagName('body')[0].appendChild(node);
				if (--i > 0) {
					setTimeout(func, 1000);
				}
			};
			setTimeout(func, 1000);
		} else {
			window.alert('Popup Blocked');
		}
	}
</script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

修改setTimeout等待5秒钟。

setTimeout(func, 5000);

只要您获得登录cosole,请展开它。你会发现它与你的期望是一致的。即 - 第1次迭代为1次,第2次为2次,第3次为3次。

现在开始你正在看到的行为。这是因为在完成所有操作之前,您不会在控制台中展开(没有时间扩展)<body>...</body>。浏览器执行一些延迟加载以进行优化。因此,除非通过单击enter image description here进行扩展,否则它永远不会加载完整的主体。如果在完成所有超时后再点击它,它会加载当时找到的正文内容。

希望这能解释你的行为。