JavaScript 为什么 setTimeout 为 0,而不是直接调用?

作者:vkvi 来源:ITPOW(原创) 日期:2021-8-3

先说点题外的

JavaScript 中 setTimeout 的第 2 个参数为 0,但是实际上并不是 0,因为浏览器有个最小值,比如 4ms、10ms(不同浏览器不同),如果设置为 0,也会按 4ms、10ms 执行。

设置为 0 起什么作用?

setTimeout(function (){
	console.log("a");
}, 0);
setTimeout(function (){
	console.log("b");
}, 0);
console.log("1");

如上,显示的是:1、a、b。

可以看出 setTimeout 是要等所有程序执行完成了,它才执行的。

这时,你可能要说了,这有啥用稀奇的,而且这没啥用呀。我不要 setTimeout,调整下程序顺序就 OK 了。

继续看看

<input type="button" value="click" id="i1" />
<input type="input" value="" id="i2" />
<script>
var i1 = document.querySelector("#i1");
var i2 = document.querySelector("#i2");
i1.onmousedown = function () {
	i2.focus();
};
</script>

注意,如上是 onmousedown,而不是 onclick。

我们可以看到,点击按钮后,焦点并没有落在 text 上,这是因为:

  • 先 button mousedown

  • 再 text focus

  • 最后 button mouseup,就是这里将焦点夺去了。

如果我们加上 setTimeout,就可以了。

<input type="button" value="click" id="i1" />
<input type="text" value="" id="i2" />
<script>
var i1 = document.querySelector("#i1");
var i2 = document.querySelector("#i2");
i1.onmousedown = function () {
	setTimeout(function (){
		i2.focus();
	}, 0);
};
</script>

其实,好多人用 setTimeout 0,也可以用 window.onload = function (){} 代替,也就是 jQuery 中的 $(window).ready。

相关文章