Question

我使用window.open（）创建了一个空白窗口我添加了一个字符串＆＃34;等一下......＆＃34; 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;

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

Answer 1

修改setTimeout等待5秒钟。

setTimeout(func, 5000);

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

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

希望这能解释你的行为。

使用＆＃34; setTimeout（）＆＃34;时执行的顺序是什么？

1 个答案: