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调用加入到任务队列，待调用栈清空后再“立即执行任务“
js中 setTimeout延时0毫秒的作用的更多相关文章
- setTimeout延时0毫秒的作用和问题
一 作用 http://www.cnblogs.com/xieex/archive/2008/07/11/1241151.html 经常看到setTimeout延时0ms的javascript代码,感 ...
- setTimeout的作用以及setTimeout延时0毫秒的作用
以下代码输出的顺序是? console.log(1); setTimeout(function(){ console.log(2); }, 0); setTimeout(function(){ con ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- js中settimeout方法加参数
js中settimeout方法加参数的使用. 简单使用看w3school 里面没有参数调用, 例子: <script type="text/javascript"> ...
- js中setTimeout/setInterval定时器用法示例
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
- js中的时间转换—毫秒转换成日期时间
转自:http://www.javascript100.com/?p=181 前几天,在项目中遇到js时间增加问题,要将js毫秒时间转换成日期时间 var oldTime = (new Date(&q ...
- 转：js中javascript:void(0) 真正含义
from:http://www.jb51.net/article/71532.htm 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常 ...
- js中setTimeout()的使用bug
今天用setTimeout()时,遇到一个奇怪的现象,通过多方面的查询,最终解决了问题,这是setTimeout()设计的时候存在的一点点bug. 代码的作用主要是在三秒后自动关闭本浏览器窗口: 代码 ...
- js中setTimeout和setInterval的应用方法（转）
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
随机推荐
- linux-基础命令篇-02
基本命令:--LS 关于显示的颜色含义: 白色:表示普通文件 蓝色:表示目录 绿色:表示可执行文件 红色:表示压缩文件 浅蓝色:链接文件 红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰色:表示 ...
- 利用itext将html页面转成pdf(不模糊)
1.maven项目进入依赖 <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId> ...
- iOS 性能优化总结
卡顿产生的原因 在 VSync信号到来后,系统图形服务会通过 CADisplayLink等机制通知 App,App主线程开始在 CPU中计算显示内容,比如视图的创建.布局计算.图片解码.文本绘制等.随 ...
- Python3+unittest使用教程
一.直接使用TestCase 注意所有测试方法都需要以test开头.代码如下: import unittest class Test1(unittest.TestCase): @classmethod ...
- K2百家讲坛 | 越秀地产：K2为房企数字化转型带来更多可能
随着数字化经济时代的到来,房地产行业逐渐形成了新的竞争和市场格局,房企要在此背景下实现稳步发展,需要由原本的粗放式管理逐渐向集团性管理.精细化管控转变,这对房企的经营发展战略和业务管理方式都提出了不小 ...
- LAMP分离搭建WordPress
实验环境:centos6.5 php5.3.6 http2.4.35 yum安装mysql 关闭三台主机的Selinux.iptalbes 配置apache: 解压软件包 安装依赖包:pcre-dev ...
- @EnableHystrix
@EnableHystrix 启动熔断降级服务 @Component把普通的pojo类实例到spring容器中去,相当于配置文件中的<bean id="" class=&qu ...
- Asp.Net Core MongoDB
废话不说直接上代码: using MongoDB.Bson.Serialization.Attributes; namespace XL.Core.MongoDB { public interface ...
- web应用及web.xml
一.创建web应用 1.在任意目录新建webDemo文件夹 2.在webDemo下新建WEB-INF文件夹(注意大小写) 3.在WEB-INF中新建web.xml文件(可以copy已有的web应用中的 ...
- Linux 环境下umount， 报 device is busy 的问题分析与解决方法
在Linux环境中,有时候需要挂载外部目录或硬盘等,但当想umount时,却提示类似“umount:/home/oracle-server/backup:device is busy”这种提示. 出现 ...