经常看到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调用加入到任务队列，待调用栈清空后再“立即执行任务“

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

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

    一 作用 http://www.cnblogs.com/xieex/archive/2008/07/11/1241151.html 经常看到setTimeout延时0ms的javascript代码,感 ...

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

    以下代码输出的顺序是? console.log(1); setTimeout(function(){ console.log(2); }, 0); setTimeout(function(){ con ...

  3. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  4. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

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

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

  6. js中的时间转换—毫秒转换成日期时间

    转自:http://www.javascript100.com/?p=181 前几天,在项目中遇到js时间增加问题,要将js毫秒时间转换成日期时间 var oldTime = (new Date(&q ...

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

    from:http://www.jb51.net/article/71532.htm 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常 ...

  8. js中setTimeout()的使用bug

    今天用setTimeout()时,遇到一个奇怪的现象,通过多方面的查询,最终解决了问题,这是setTimeout()设计的时候存在的一点点bug. 代码的作用主要是在三秒后自动关闭本浏览器窗口: 代码 ...

  9. js中setTimeout和setInterval的应用方法（转）

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

随机推荐

  1. WPF前台界面显示“未将对象引用设置到对象的实例”

    在做即时通信项目中,使用WPF的MVVM模式,如果在前台绑定VM,经常会显示波浪线,鼠标放上去提示未将对象引用设置到对象的实例,但程序能正常运行,后来发现如果前台不绑定VM,在后台cs里绑定就不会出现 ...

  2. nginx日志相关运维操作记录

    在分析服务器运行情况和业务数据时,nginx日志是非常可靠的数据来源,而掌握常用的nginx日志分析命令的应用技巧则有着事半功倍的作用,可以快速进行定位和统计. 1)Nginx日志的标准格式(可参考: ...

  3. 李航《统计学习方法》CH02

    CH02 感知机 前言 章节目录 感知机模型 感知机学习策略 数据集的线性可分性 感知机学习策略 感知机学习算法 感知机学习算法 感知机学习算法的原始形式 算法的收敛性 感知机学习算法的对偶形式 导读 ...

  4. markdown在线编辑插件mditor

    官方地址 https://bh-lay.github.io/mditor/ ##使用方法 #1.页面添加dom ```javascript <textarea id="md_edito ...

  5. Python 计算π及进度条显示

    一,首先打开命令提示符找到Python路径,输入pip install tqdm下载第三方库tpdm. 二,写程序 法一 from math import * from tqdm import tqd ...

  6. MVP技术沙龙上海站-SQL BI

    5月,微软爱好者们齐聚一起,在上海港汇中心,参加<MVP技术沙龙上海站-SQL BI>系列讲座,下面是现场图片.  

  7. nginx 实现所有的子域名301跳转到另外一个域名的对应子域名

    server { listen ; server_name *.olddomain.com; if ( $http_host ~* "^(.*?)\.olddomain\.com$" ...

  8. 《程序设计入门——C语言》翁恺老师 第五周编程练习记录

    1 素数和(5分) 题目内容: 我们认为2是第一个素数,3是第二个素数,5是第三个素数,依次类推. 现在,给定两个整数n和m,0<n<=m<=200,你的程序要计算第n个素数到第m个 ...

  9. element-ui的那些坑与总结

    tags: 默认情况下,下划线是文本宽度 如果要加宽,则可以设置文本(label)的padding, 常规情况下,无法改label宽度,因为他是动态计算的 不过,可以通过自定义,把label拿出来,自 ...

  10. 电子签名在K2中的应用

    全球越来越多的企业开始使用电子签名(即eSignatures),在减少碳排放的同时简化业务流程,提高文档安全性,便于记录保存,并降低企业成本.在美国法律下,电子签名具备等同于手写签名的法律效力. 什么 ...