<!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作用解释1</title> <script type="text/javascript" > // bsd lisenced 2008 realazy (function(){ // document.getElementById shorthand function get(id){ return document.getElementById(id); } window.onload = function(){ 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(); } get('makeinput2').onmousedown = function(){ var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('value', 'test1'); get('inpwrapper2').appendChild(input); setTimeout(function(){ input.focus(); input.select(); }, 0); } // 这个例子，onkeypress在字符出现之前触发，所以不加setTimeout拿到上一个变化。加了setTimeout拿到正在变化。 get('input').onkeypress = function(){ var input = this; setTimeout(function(){ get('preview').innerHTML = input.value; },0); }; } })(); </script> </head> <body> 文档更新一个线程，事件处理一个线程，浏览器处理html，css，js是单线程，处理了文档更新，没有额外线程处理事件。而setTimeout可以重新生成任务队列，所以你懂的。<br /> <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></h2> <p id="inpwrapper2"></p> <h2>3、另一个例子</h2> <p><input type="text" id="input" value=""/><span id="preview"></span></p> <br /> <span id="preview2"></span> </body> </html>