经常看到setTimeout延时0ms的javascript代码，感到很迷惑，难道延时0ms和不延时不是一个道理吗？后来通过查资料以及实验得出以下两个作用，可能还有作用我还不知道，希望得知的朋友在后面评论上不吝指出。
1、实现javascript的异步；
正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身，这时就可以用到setTimeout延时0ms来实现了。
如：
alert(1);
setTimeout("alert(2)", 0);
alert(3);
虽然延时了0ms,但是执行顺序为：1，3，2
这样就保证setTimeout里面的语句在某一代码段中最后执行。
2、在事件中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。；
举个例子来说这句话的意思，假如当某个事件在页面上建立一个文本框，并给文本框赋值（完成文档当前状态更新），然后将焦点定到文本框，并且选中文本框的内容（后面部分就需要用到setTimeout 延迟0ms实现，否则不好实现）。
先看个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">2
<html>3
<head>4
<title>setTimeout</title>5
<script type="text/javascript" >6
(function(){7
8
function get(id){9
return document.getElementById(id);10
}11
12
window.onload = function(){13
get('makeinput').onmousedown = function(){14
var input = document.createElement('input');15
input.setAttribute('type', 'text');16
input.setAttribute('value', 'test1');17
get('inpwrapper').appendChild(input);18
input.focus();19
input.select();20
}21
get('makeinput2').onmousedown = function(){22
var input = document.createElement('input');23
input.setAttribute('type', 'text');24
input.setAttribute('value', 'test1');25
get('inpwrapper2').appendChild(input);26
setTimeout(function(){27
input.focus();28
input.select();29
}, 0);30
}31
get('input1').onkeypress = function(){32
get('preview1').innerHTML = this.value;33
}34
get('input2').onkeypress = function(){35
setTimeout(function(){36
get('preview2').innerHTML = get('input2').value;37
},0 );38
}39
}40
})();41
</script>42
</head>43
<body>44
<h1><code>DEMO1</code></h1>45
<h2>1、未使用 <code>setTimeout</code>（未选中文本框内容）</h2>46
<button id="makeinput">生成 input</button>47
<p id="inpwrapper"></p>48
<h2>2、使用 <code>setTimeout</code>（立即选中文本框内容）</h2>49
<button id="makeinput2">生成 input</button></h2>50
<p id="inpwrapper2"></p>51
52
--------------------------------------------------------------------------53
<h1><code>DEMO2</code></h1>54
<h2>1、未使用 <code>setTimeout</code>(只有输入第二个字符时，前一个字符才显示出来)</h2>55
<input type="text" id="input1" value=""/><div id="preview1"></div>56
<h2>2、使用 <code>setTimeout</code>(输入时，字符同时显示出来)</h2>57
<input type="text" id="input2" value=""/><div id="preview2"></div>58
</body>59
</html>60
61
运行示例
现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。其实，这是一个把需要执行的任务从队列中跳脱的技巧。在DEMO1中，JavaScript 引擎在执行 onmousedown时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 方法，由于这两个方法都不在队列中，在完成 onmousedown 后，JavaScript 引擎已经丢弃了这两个任务，正如第一种情况。而在第二种情况中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。
相关推荐
- **DOM更新**：在修改DOM元素后，可以使用`setTimeout(func, 0)`确保在DOM更新完成后再执行依赖于新状态的代码。 - **UI渲染优化**：通过将耗时操作拆分成多个小任务，利用`setTimeout(func, 0)`间隔执行，避免阻塞...
例如，对于`setTimeout()`，可以使用`clearTimeout()`，而对于`setInterval()`，则使用`clearInterval()`。 在实际开发中，`setTimeout()`常用于实现一次性延迟执行，如加载动画的结束；而`setInterval()`则适用于...
JavaScript定时器是编程中不...总之，理解并正确使用`setTimeout`和`setInterval`是JavaScript开发中的基础技能。它们可以帮助我们实现延迟执行、定时执行和周期性执行等功能，但同时也需要谨慎处理以防止潜在的问题。
### JS中setTimeout()的用法详解 #### setTimeout()概述 `setTimeout()` 是JavaScript中用于设置一...理解和掌握`setTimeout()` 与`clearTimeout()` 的正确使用方法，对于开发中实现复杂逻辑和优化用户体验至关重要。
在这个修复后的版本中，我们使用了一个外部变量`replayi`来跟踪当前的索引，避免了在`setTimeout`内部直接使用`i`。这样，每个定时器都有自己的状态，可以正确地执行。 总结一下，`setTimeout`在JavaScript中用于...
2. 在闭包中使用setTimeout时需要注意变量作用域问题，以及避免因循环过快而导致的问题。 3. 要注意递归的setTimeout可能会阻塞事件队列，影响页面响应。 综上所述，setTimeout是JavaScript中非常重要的一个功能，...
下面通过一个简单的例子来展示如何使用`setTimeout`： ```javascript window.setTimeout(function() { console.log('Hello, World!'); }, 3000); // 3秒后输出 "Hello, World!" ``` #### 三、`window.setTimeout()...
JavaScript中的`setTimeout`函数是一个非常重要的异步编程工具，它用于在指定的毫秒数之后调用一个函数或...例如，在处理用户交互、动画效果或者DOM操作时，适时使用`setTimeout(fn, 0)`可以提高程序的响应性和流畅性。
这个特性在某些场景下非常有用，比如在例子2中，为了确保`input.focus()`和`input.select()`能正确执行，我们使用了延迟时间为0的`setTimeout`包裹这两个方法。这是因为当在事件处理器（如`onkeypress`）内部直接...
虽然在`window`对象上定义，但在日常使用中我们通常省略`window`，直接调用`setTimeout`。当`setTimeout`的第二个参数设置为0时，它的行为并不是立即执行，而是尽可能快地在当前任务队列执行完毕后执行。 首先，...
本文将详细介绍如何使用JavaScript的`setTimeout`函数实现倒计时效果。 `setTimeout`是JavaScript中的一个定时器函数，它可以指定一个函数在多少毫秒后执行一次。在倒计时应用中，我们利用`setTimeout`来定期更新...
在JavaScript编程中，`setTimeout`是一个非常重要的函数，它用于在指定的时间（以毫秒为单位）后调用一个函数或者执行某段代码。在这个场景中，“setTimeout制作36选7”指的是利用`setTimeout`来模拟一个彩票抽奖...
使用 `setTimeout` 方法时，有时需要将参数传递给回调函数，但是在早期的JavaScript示例中，尤其是在W3School网站上，通常只演示了不带参数的 `setTimeout` 使用方法。本篇文档将详细解释如何在 `setTimeout` 中正确...
本文将深入探讨`setTimeout`方法及其参数的使用方式，并通过具体示例来帮助读者更好地理解和应用。 #### 一、`setTimeout`方法的基本介绍 `setTimeout`方法属于全局对象，可以在任何作用域内使用。其基本语法如下...
如果不能或不想使用箭头函数，可以将Vue实例的`this`保存到一个变量，如`self`或`that`，然后在`setTimeout`的回调函数中使用这个变量。示例如下： ```javascript export default { data() { return { left: -...
我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们直接进入主题吧! 注意,...
有时为了进行异步处理，而使用setTimeout(function…,0)；比如： 代码如下: function f(){ … // get ready setTimeout(function(){ …. // do something }, 0); return …; } 在setTimeout设定的函数处理器...
JavaScript 中的 SetInterval 与 setTimeout 用法 在 JavaScript 中，SetInterval 和 setTimeout 是两种常用的定时器函数，用于实现延迟执行或重复执行某些操作。本文将详细介绍这两种函数的用法和区别。 ...
在这个例子中，尽管`setTimeout`的延迟时间为0，但由于JavaScript引擎首先执行for循环，因此`console.log(2)`会先于`console.log(1)`打印出来。 `setInterval`函数则不同，它会按照设定的时间间隔不断重复执行指定...