前言:问题引出

  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 简笔》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Qt简介 及与MFC、GDK+的比较

    Qt C++图形用户界面应用程序开发框架. Qt的由来和发展 1.QT由来 Haavard Nord 和Eirik Chambe-Eng于1991年开始开发"Qt",1994年3月 ...

  2. It’s Time To Think Linq

    动机 如果你有以下迷惑,你应该看看这篇文章 你想办法找到所有与GameObject.FindGameObjectsWithTag的变换(),而不是游戏本身的对象 你需要操作,排序和更改列表和数组的类型 ...

  3. Questions about UIUC and USC

    Questions about UIUC and USC I am admitted to University of Illinois at Urbana-Champaign (UIUC) Prof ...

  4. Eclipse中Tomcat的配置

    1.Window-Preferences-Server-Runtime Environments 2.点击Add,选择相应的Tomcat版本,我的是7.0的所以我选择这个.并勾选Create a ne ...

  5. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. GoldenGate配置(三)之DDL复制配置

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyanlong/article/details/33430293 GoldenGate配置( ...

  7. 构造方法,this关键字,static关键字,封装

    1.构造方法 定义:构造方法是指实例化对象的方法 语法:[修饰符]  类名(参数){    } 根据有无参数分为有参构造和无参构造 1)有参构造 语法:[修饰符]  类名(type 实例变量,int ...

  8. 实例详解:MFC坐标轴实现

    需求:MFC坐标轴实现-----最好有步骤啊,刚刚才接触C++和MFC啊.MFC怎样在特定区域建立坐标轴,x轴自适应,y轴有固定范围,最好有网格. 解决思路:VC 内存绘图,不闪屏,具体代码如下: / ...

  9. JAVA框架 Spring 调用jdbcsuport简化开发

    一)使用DAO的jdbcsuport来简化开发 首先来清楚一个概念: 我们在进行配置文件来进行依赖注入的时候,主要是通过set方法来进行设置的. 正常我们使用spring的jdbctemplate的时 ...

  10. MVC 拦截指定的action

    有时,我们需要在特定的一些aciton中做校验.比如:验证是否登录.实现方式有两种: 一.编写一个公共的方法专门用于实现是否登录的验证,然后在每个需要进行验证的aciton的头部去调用该方法,根据方法 ...