《无所不能的JavaScript编程系列:setTimeout 简笔》
前言:问题引出
JavaScript中会经常用到setTimeout来推迟一个函数的执行,如:
setTimeout(function(){alert("Hello World");},1000)
它的意思是会在执行到这句话后延迟1秒钟(1000毫秒)来弹出alert窗口。
那么再看这一段:
function a() {
setTimeout(function() {alert(1)}, 0);
alert(2);
}
注意,这段代码中的setTimeout延迟设为了0,就是延迟0毫秒,貌似是不做任何延迟立刻执行。但实际的执行结果确是先弹出2再弹出1,这是为什么呢?JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行。这里设成0毫秒,理所当然就立即被执行了!?这得从Javascript调用堆栈(call stack)和setTimeout的功能说起。
问题剖析
首先,JavaScript引擎是单线程运行的,浏览器无论在什么时候都有且只有一个线程在运行JavaScript程序,即同一时间只执行一条代码,所以每一个JavaScript代码执行块会“阻塞”其它异步事件的执行。
其次,和其他的编程语言一样,Javascript中的函数调用也是通过堆栈实现的。如上例中,在执行函数a的时候,函数a先入栈,如果不给alert(1)加setTimeout,那么alert(1)第2个入栈,最后是alert(2)。但现在给alert(1)加上setTimeout后,alert(1)就被加入到了一个新的堆栈中等待,并“尽可能快”的执行。这个尽可能快就是指在a的堆栈完成后就立刻执行,因此实际的执行结果就是先alert(2),再alert(1)。在这里setTimeout实际上是让alert(1)脱离了当前函数调用堆栈。
扩展:AJAX是否真的异步?
既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行onreadystatechange所设置的函数。
扩展:setTimeout的 应用场景
一、解决双击事件触发单击事件的冲突
提示:默认双击会先触发单击事件,使用延迟单击事件进行处理。
function click(){
isdb=false;
window.setTimeout(cc, 500)
function cc(){
if(isdb!=false)return;
alert("单击")
}
}
function dblclick(){
isdb=true;
alert("双击")
}
二、解决双击事件触发单击事件的冲突
AJAX请求后台,调用webservice或调用大量数据查询等情况造成前台一直处于loading加载框的情况,可以使用setTimeout来解决。
部分JQ源码如下:
if ( s.async && s.timeout > 0 ) {
timeoutTimer = setTimeout(function() {
jqXHR.abort("timeout");
}, s.timeout );
}
编后语
本博文简单介绍了setTimeout和JS单线程的知识,这块水其实很深,但这边只做一个随笔。有兴趣的同学,推荐阅读jQuery作者John的一篇文章:How JavaScript Timers Work,你会对JavaScript单线程本质和setTimeout以及setInterval有更加深刻的理解。
http://ejohn.org/blog/how-javascript-timers-work/
当你理解了JS的单线程和堆栈原理,那在使用JS进行高级程序编写中,必然会得心应手。
当你还在说JavaScript是一门玩具型的脚本语言时,它也在远处嘲笑你对它不够了解。
《无所不能的JavaScript编程系列:setTimeout 简笔》的更多相关文章
- 简单物联网:外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- Qt简介 及与MFC、GDK+的比较
Qt C++图形用户界面应用程序开发框架. Qt的由来和发展 1.QT由来 Haavard Nord 和Eirik Chambe-Eng于1991年开始开发"Qt",1994年3月 ...
- It’s Time To Think Linq
动机 如果你有以下迷惑,你应该看看这篇文章 你想办法找到所有与GameObject.FindGameObjectsWithTag的变换(),而不是游戏本身的对象 你需要操作,排序和更改列表和数组的类型 ...
- Questions about UIUC and USC
Questions about UIUC and USC I am admitted to University of Illinois at Urbana-Champaign (UIUC) Prof ...
- Eclipse中Tomcat的配置
1.Window-Preferences-Server-Runtime Environments 2.点击Add,选择相应的Tomcat版本,我的是7.0的所以我选择这个.并勾选Create a ne ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- GoldenGate配置(三)之DDL复制配置
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyanlong/article/details/33430293 GoldenGate配置( ...
- 构造方法,this关键字,static关键字,封装
1.构造方法 定义:构造方法是指实例化对象的方法 语法:[修饰符] 类名(参数){ } 根据有无参数分为有参构造和无参构造 1)有参构造 语法:[修饰符] 类名(type 实例变量,int ...
- 实例详解:MFC坐标轴实现
需求:MFC坐标轴实现-----最好有步骤啊,刚刚才接触C++和MFC啊.MFC怎样在特定区域建立坐标轴,x轴自适应,y轴有固定范围,最好有网格. 解决思路:VC 内存绘图,不闪屏,具体代码如下: / ...
- JAVA框架 Spring 调用jdbcsuport简化开发
一)使用DAO的jdbcsuport来简化开发 首先来清楚一个概念: 我们在进行配置文件来进行依赖注入的时候,主要是通过set方法来进行设置的. 正常我们使用spring的jdbctemplate的时 ...
- MVC 拦截指定的action
有时,我们需要在特定的一些aciton中做校验.比如:验证是否登录.实现方式有两种: 一.编写一个公共的方法专门用于实现是否登录的验证,然后在每个需要进行验证的aciton的头部去调用该方法,根据方法 ...