经常看到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实现,否则不好实现)。
先看个例子:
1<!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
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可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。
相关推荐
Javascript定时器 三 setTimeout func 0
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method,下面这篇文章主要给大家介绍了关于setTimeout时间设置为0的相关资料...
JavaScript使用setTimeout实现倒计时效果 为了加强对JavaScript原生代码的编写能力,以及巩固setTimeout()的使用方法,制作了一个倒计时的demo,倒计时在现在的网站中算是一个常见的小功能,如果大家喜欢的话可以...
而setTimeout函数是异步的,异步的事件会加入一个队列,会等到当前同步的任务执行完毕后,再执行setTimeout队列的任务。所以,通过设置任务在延迟0毫秒后执行,就能改变任务执行的先后顺序,延迟该任务发生,改变它...
我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们直接进入主题吧! 注意,...
有时为了进行异步处理,而使用setTimeout(function…,0);比如: 代码如下: function f(){ … // get ready setTimeout(function(){ …. // do something }, 0); return …; } 在setTimeout设定的函数处理器...
最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下。个人理解,如果有错误的地方还请指出。THX 要想理解JavaScript的定时器是如何工作的,先要明白 JavaScript 引擎是单线程的。这个可以...
如果要异步执行一个函数,我们最先想到的方法肯定会是setTimeout 例如:setTimeout(function...chrome下测试 setTimeout 0 的实际执行时间间隔大概在12ms左右。 那么如果想最快地异步执行一个函数,有没有什么可以提速
javascript中定时器setTimeout的用法一般如下,调用beginrotate之后就进入定时执行rotateloop的一个过程,如下代码: 代码如下: var angle = 0; function rotateloop() { if (angle < 360) { angle++; //use ...
setTimeout(function(){ alert(‘cost time:’+(new Date-t)) },0); [removed] </HEAD> <BODY> </BODY> </HTML> 测试结果: 在ie各个版本浏览器下,得到的alert结果大
在日常编码中,你会发现,给 setTimeout 和 setInterval 设定延迟时间往往并不准,或者干脆 setTimeout(function(){xxx},0) 也不是立马执行(特别是有耗时代码在前),这是因为 js 是单线程的,有一个事件队列机制,...
由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。
Javascript中会经常用到setTimeout来推迟一个函数的... 注意这段代码中的setTimeout延迟设为了0,就是延迟0毫秒,貌似是不做任何延迟立刻执行,即1,2。但实际的执行结果确是2,1。为什么?这得从Javascript调用堆栈(c
相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。 2.按照最原始的倒计时效果,实现如下:...
setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },100) setTimeout(function() { ... },0) console.log(3); 这次的结果又会是什么呢?
var count = 0; var timer; var timerOn = false; function timedCount() { count++; timer = setTimeout(function(){ timedCount() }, 1000); } function doTimer() { if (!timerOn) { timerOn = true; ...
本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> &...