先说点题外的
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。