本文共 1946 字，大约阅读时间需要 6 分钟。
近期在研究异步编程的我对于setTimeout之类的东西异常敏感。在SegmentFault上看到了一个问题《关于SetTimeout时间设为0时》：提问者读了一篇文章，原文解释setTimeout延迟时间为0时会发生的事情，提问者提出了几个文章中的几个疑点。读了那篇文章之后发现原文的作者对于setTimeout的理解和自己的认知有点出入，于是编写了相关测试的代码以求答案。最终编写了这篇文章。 setTimeout是如何巧妙使用的！
本文内容如下： •起因•单线程的JavaScript
•setTimeout背后意味着什么
•参考和引用
http://vdisk.weibo.com/s/FuhRYFUVntq4S
JavaScript - 前端开发交流群：377786580起因
上午在SegmentFault上看到了这个问题《关于SetTimeout 时间设为0时》（注：SegmentFault正在调整备案，如不能访问，请点击这里），原提问者注明了问题来源：《JS setTimeout延迟时间为0的详解》。这个问题来源也是转载的，我后来找到了出处。
在问题来源的那篇的文章中（后者），讲述了JS是单线程引擎：它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。 而后，转载的那篇文章列出并补充了原文的栗子： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>setTimeout</title> <script type="text/javascript"> function get(id) { return document.getElementById(id); } window.onload = function () { //第一个例子：未使用setTimeout get('makeinput').onmousedown = function () { var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('value', 'test1'); get('inpwrapper').appendChild(input); input.focus(); input.select(); } //第二个例子：使用setTimeout get('makeinput2').onmousedown = function () { var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('value', 'test1'); get('inpwrapper2').appendChild(input); //setTimeout setTimeout(function () { input.focus(); input.select(); }, 0); } //第三个例子，onkeypress输入的时候少了一个值 get('input').onkeypress = function () { get('preview').innerHTML = this.value; } } </script> </head> <body> <h1><code>setTimeout</code></h1> <h2>1、未使用 <code>setTimeout</code></h2> <button id="makeinput">生成 input</button> <p id="inpwrapper"></p> <h2>2、使用 <code>setTimeout</code></h2> <button id="makeinput2">生成 input</button> <p id="inpwrapper2"></p> <h2>3、另一个例子</h2> <p> <input type="text" id="input" value="" /><span id="preview"></span> </p> </body> </html>