js中 setTimeout延时0毫秒的作用

经常看到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">
<html>
<head>
    <meta charset="utf-8">
    <title>setTimeout</title>

    <script type="text/javascript" >
        (function(){

            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(‘input1‘).onkeypress = function(){
                    get(‘preview1‘).innerHTML = this.value;
                }
                get(‘input2‘).onkeypress = function(){
                    setTimeout(function(){
                        get(‘preview2‘).innerHTML = get(‘input2‘).value;
                    },0 );
                }
            }
        })();

    </script>

</head>

<body>
<h1><code>DEMO1</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>

--------------------------------------------------------------------------
<h1><code>DEMO2</code></h1>
<h2>1、未使用 <code>setTimeout</code>(只有输入第二个字符时,前一个字符才显示出来)</h2>
<input type="text" id="input1" value=""/><div id="preview1"></div>
<h2>2、使用 <code>setTimeout</code>(输入时,字符同时显示出来)</h2>

<input type="text" id="input2" value=""/><div id="preview2"></div>

</body>
</html>

现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。

在DEMO1中,JavaScript 引擎在执行 onmousedown时,会先执行alert(123),然后执行select和focus调用,由于此时还没有创建好DOM元素,不会得到期望的结果,然后执行创建操作。相反 如果我们改变调用的执行顺序即可,“先执行“ 元素的创建,使用settimeout延迟0毫秒再执行select和focus调用。核心在于,把select和focus调用加入到任务队列,待调用栈清空后再“立即执行任务“

时间: 2024-08-04 10:11:40

js中 setTimeout延时0毫秒的作用的相关文章

setTimeout的作用以及setTimeout延时0毫秒的作用

以下代码输出的顺序是? console.log(1); setTimeout(function(){ console.log(2); }, 0); setTimeout(function(){ console.log(3); }, 1000);console.log(4); 答案是: 1 4 2 3 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后

setTimeout延时0毫秒的作用和问题

一 作用 http://www.cnblogs.com/xieex/archive/2008/07/11/1241151.html 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗? 延时0秒能将函数执行脱离出当前环境: 当一个事件发生时,其相关的操作还没完成. 所以: 1 keypress事件中并不能获得 此处输入的字符,只能获得之前的 2 radio 的 click事件中,并不能获得此处点击是否选中该radio,而是获得点击之

setTimeout延时0毫秒的作用

经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用 1.实现javascript的异步:正常情况下javascript都是按照顺序执行的.但是我们可能让该语句后面的语句执行完再执行本身,这时就可以用到setTimeout延时0ms来实现了.如: alert(1); setTimeout("alert(2)", 0); alert(3); 虽然延时了0ms,但是执行顺序为:1,3,2 

JS中setTimeout()的使用方法具体解释

1. SetTimeOut()              1.1 SetTimeOut()语法样例              1.2 用SetTimeOut()运行Function              1.3 SetTimeOut()语法样例              1.4 设定条件使SetTimeOut()停止              1.5 计分及秒的counter    2. ClearTimeout()    3.  Set Flag   10.1 setTimeout( )

js中setTimeout/setInterval定时器用法示例

js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 function timedMsg() { setTimeout("alert('7 seconds!')",5000)//5秒后弹出信息 } setTimeout("timedMsg()",2000);//2秒后执行方法 timedMsg setInterval:在指定的时间间隔内

转:js中javascript:void(0) 真正含义

from:http://www.jb51.net/article/71532.htm 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常见这样的代码: 代码如下: <a href="javascript:doTest2();void(0);">here</a> 但这儿的void(0)究竟是何含义呢? void 操作符用法格式如下: 1. javascript:void (expression) 2.

js中 javascript:void(0)的含义

void(0)用于执行某些处理,但是不整体刷新页面的情况下, javascript:void(0)表示不做任何动作.如: <a href="javascript:void(0);" onclick="alert('ok');"></a> 这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: <a href="javascript:doTest2();void(0);">

js中setTimeout()的使用bug

今天用setTimeout()时,遇到一个奇怪的现象,通过多方面的查询,最终解决了问题,这是setTimeout()设计的时候存在的一点点bug. 代码的作用主要是在三秒后自动关闭本浏览器窗口: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style>

js中setTimeout与setInterval

setTimeout和setInterval javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中 以下方法都是window对象的方法: setTimeout() 和 clearTimeout() setInterval() 和 clearInterval() 一.使用时注意作用域 如果需要在对象内部用定时器执行该对象的某一方法时就需要注意了