setTimeout(call,0)作用
1、实现javascript的异步;
正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身,这时就可以用到setTimeout延时0ms来实现了。
如:
alert(1);
setTimeout("alert(2)", 0);
alert(3);
虽然延时了0ms,但是执行顺序为:1,3,2
这样就保证setTimeout里面的语句在某一代码段中最后执行。
2、在事件中,setTimeout 会在其完成当前任何延宕事件的事件处理器的执行,以及完成文档当前状态更新后,告诉浏览器去启用 setTimeout 内注册的函数。;
举个例子来说这句话的意思,假如当某个事件在页面上建立一个文本框,并给文本框赋值(完成文档当前状态更新),然后将焦点定到文本框,并且选中文本框的内容(后面部分就需要用到setTimeout 延迟0ms实现,否则不好实现)。
先看个例子:
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可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。
setTimeout(call,0)作用的更多相关文章
- 【 js 基础 】【 源码学习 】 setTimeout(fn, 0) 的作用
在 zepto 源码中,$.fn 对象 有个 ready 函数,其中有这样一句 setTimeout(fn,0); $.fn = { ready: function(callback){ // don ...
- js中 setTimeout延时0毫秒的作用
经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后面 ...
- setTimeout(fn, 0) 的作用
在 zepto 源码中,$.fn 对象 有个 ready 函数,其中有这样一句 setTimeout(fn,0); 1 $.fn = { 2 ready: function(callback){ 3 ...
- setTimeout(fn,0)的作用分析
众所周知,大家对setTimeout的用法肯定都比较熟悉了,但是不是还是会经常忘记使用呢,例如博主阿里面试时就忘了,见阿里前端面试. 今天跟大家讨论一下setTimeout(fn,0)的用法,相信很多 ...
- Javascript定时器(三)——setTimeout(func, 0)
setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...
- setTimeout(f, 0)的应用&利用Deferred实现队列运行
任务:从mongodb中导出csv数据,输出内容如下userid username usergender points points表: { "userid" : 1022, &q ...
- JavaScript下的setTimeout(fn,0)意味着什么?
近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...
- System.exit(0)作用
System.exit(0)作用 public class HelloGoodbye{ try{ System.out.println(“Hello World”); System.exit(0) ...
- setTimeout中0毫秒延时
先来看段代码,思考一下执行的结果. alert(1); setTimeout(function(){alert(2);}, 0); alert(3); 估计很多人认为执行结果为1,2,3,原因就是认为 ...
随机推荐
- mac下搭建http服务器(apache+php),使用homebrew升级php
新版mac依旧预装了 Apache ,但是已经不能在 「系统偏好设置」中的「Web 共享」来开启了,需要手动通过命令行开启. 启动Apache 启动:sudo apachectl start 停止:s ...
- margin合并及解决办法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 水平方向不会发生合并 只有普通文档流中块框的垂直外边距才会发生外边距合并 ...
- CSS选择器有哪些?选择器的优先级如何排序?
CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器 e.g. 说明 id选择器 #id #header 选择id="header ...
- tomcat+memcached+nginx部署文档(附完整部署包直接运行即可)
1 前言 1.1 目的 为了正确的部署“ngix+memcached”特编写此部署手册,使安装人员可以通过部署手册知道如何部署系统,也为需要安装该系统的安装人员正确.快速的部署本系统提供帮助. 1.2 ...
- [shell] shell 变量生命周期, source, export
1. shell 的派生 用户登录到Linux系统后,系统将启动一个用户shell.在这个shell中,可以使用shell命令, 或声明变量,也可以创建并运行shell脚本程序.运行shell脚本程序 ...
- redis系列-要命的zrangebyscore
0x0 引子 无论做哪种业务都躲不开排行功能.Redis 的 Sorted Sets 结构就是为排行而生的.它简单易用,效率奇高.同时它也有坑,你真的了解它吗? 老规矩,先讲故事,后科普.这里是 So ...
- 利用MySQL之federated引擎实现DBLink功能
有时候我们需要跨库join查询,但是配置多数据源成本又太高,Oracle提供了DBLink功能,MySQL中也有类似的实现:federated-engine. MySQL中使用federated引擎的 ...
- Linux 文件|目录 属性
文件属性 ls -l 列出的文件|目录信息如下 第一个字符指定类型,-是文件,d是目录(dir). 后面9个字符是该文件|目录的用户权限:r读,w写,x执行. 执行是指:如果该文件是一个可执行文件, ...
- 插入数据失败提示: Setting autocommit to false on JDBC Connection 自动提交失败
来源:https://blog.csdn.net/qq_42799475/article/details/102742109 今天在执行mybstis的测试时,明明已经写好了插入语句但是数据库没有插入 ...
- Android进程调度之adj算法
copy from : http://gityuan.com/2016/08/07/android-adj/ 一.概述 提到进程调度,可能大家首先想到的是Linux cpu调度算法,进程优先级之类概念 ...