由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。
让我们看看我之前的文章：JavaScript的9个陷阱及评点，在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差，其实不只是 IE 的问题，而是现有 JavaScript 引擎对于线程实现的问题（关于线程，我的概念其实不多，如果不对，希望读者多多指教）。我们通过一个例子来说明，我们来看 1 和 2。如果你能看看源代码，会发现我们的任务很简单，就是给文档增加一个 input 文本框，并聚焦和选中。请现在分别点击一下，可以看到，1 并没有能够聚焦和选中，而 2 可以。它们之间的区别在于，在执行：
1.
input.focus();
input.select();
时， 2 多了一个延迟时间为 0 的 setTimeout 的外围函数，即：
2.
setTimeout(function(){
input.focus();
input.select();
}, 0);
按照 JavaScript: The Definitive Guide 5th 的 14.1 所说：
在实践中，setTimeout 会在其完成当前任何延迟事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。
其实，这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子，JavaScript 引擎在执行 onkeypress 时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 事件，由于这两个事件都不在队列中，在完成 onkeypress 后，JavaScript 引擎已经丢弃了这两个事件，正如你看到的例子 1 的情况。而在例子 2 中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。
这才是延迟事件为 0 的setTimeout的真正目的。在此，你可以看看例子 3，它的任务是实时更新输入的文本，现在请试试，你会发现预览区域总是落后一拍，比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时， a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地，在此我没有给出答案，因为上面所说的，就是解决思路，try it yourself!
演实网页源文件：
<!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" >
// 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);
}
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></h2>
<p id="inpwrapper2"></p>
<h2>3、另一个例子</h2>
<p><input type="text" id="input" value=""/><span id="preview"></span></p>
</body>
</html>
原文地址：http://blog.csdn.net/lsk_jd/article/details/6080772
分享到：
相关推荐
### JS中setTimeout()的用法详解 #### setTimeout()概述 `setTimeout()` 是JavaScript中用于设置一个函数或代码段在指定时间后执行的函数。它是`window`对象的一个方法，通常被用于异步编程、设置延时任务、动画...
### JavaScript中的`window.setTimeout()`详解 #### 一、概述 在JavaScript编程中，`window.setTimeout()`函数是一个非常重要的异步编程工具，它允许开发者在指定的时间后执行特定的代码片段。这一特性对于实现...
### JavaScript中的`setTimeout`方法详解 在JavaScript编程中，`setTimeout`是一个非常实用且重要的功能，它用于在指定的时间间隔后执行某个函数或指定的一段代码。本文将深入探讨`setTimeout`方法及其参数的使用...
3. `infinite-scroll-throttle-delay`: 设置检查 `busy` 值的时间间隔，默认为 200 毫秒。`vue-infinite-scroll` 会周期性检查 `busy` 和是否滚动到底部，只有两者条件都满足时，才会执行回调函数。 在实际应用中，...
### JS中的setTimeout与setInterval的区别 在JavaScript编程中，`setTimeout`与`setInterval`是两个非常常用的函数，用于控制代码执行的时间间隔。虽然它们在功能上有一定的相似性，但其实现的效果却大不相同。下面...
6. **setTimeout和setInterval**：这两个函数接受一个回调函数作为参数，用来指定在延迟时间后执行的代码。由于它们是异步的，不能直接返回结果，所以需要通过回调来传递执行结果。 7. **函数作为对象**：在...
然而，即使延迟时间为0，这个函数也不会立即执行，因为JavaScript会先执行当前代码块中的所有同步任务，然后再处理定时器。 JavaScript 引擎遵循以下步骤来处理任务： 1. **同步任务执行**：所有同步任务都在主线...
JavaScript中的定时器函数setTimeout和setInterval都用于延迟执行代码，但它们的工作方式和用法有所不同。以下是关于这两个函数的详细解析： 1. setTimeout函数的基本概念和用法： setTimeout是JavaScript中的一个...
} setTimeout : 延迟多长时间执行什么方法，具体使用：//www.jb51.net/article/35535.htm opener: 指parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。在JS 中，...
这段代码的执行顺序为：正常执行、nextTick延迟执行1、nextTick延迟执行2、setImmediate延迟执行1、setImmediate延迟执行2、强势插入。 Node.js在新版中，process.nextTick执行完毕后会循环遍历setImmediate，执行...
- `delay`: 必需，以毫秒为单位的时间间隔，表示延迟多长时间后执行函数。 - `param1, param2, ...`: 可选，传递给被调用函数的参数。 在提供的实例中，我们看到了`setTimeout()`的用法。例如，`start()`函数中，`...
`schedule`接受四个参数：回调函数、间隔时间、重复次数和延迟时间。 - 延迟3秒后开始，每隔1秒执行一次，重复5次： ```javascript this.schedule(() => { console.log('abc'); }, 1, 5, 3); ``` - 取消`...
JavaScript中的setTimeout和setInterval是两个非常实用的定时器函数，它们允许开发者在指定的时间后执行代码或者在固定的时间间隔内重复执行代码。以下是关于这两个函数的详细知识点。 ### setTimeout函数 ...
《jQuery.blockUI.js插件详解：打造高效用户体验》 在Web开发中，提供良好的用户体验是至关重要的。当网站或应用程序正在进行耗时的操作时，如数据加载、提交表单或进行后台处理，用户可能会尝试进行其他操作，这...
如果你希望计时器在首次启动后延迟一段时间才开始执行，可以使用`setTimeout`参数： ```javascript var myTimer = $.timer(1000, function() { // 1秒后开始，然后每1秒执行一次 }, {setTimeout: 1000}); ``` ###...
- `delay`：是以毫秒为单位的延迟时间。 - `arg1, arg2, ...`：是可选参数，用于传递给`function`。 例如，要设置一个1秒后的延迟执行函数，可以这样写： ```javascript setTimeout(function() { console.log(...