setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

function showDate(){
var date=new Date();
console.log(date);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){showDate();},);
console.log("cc");
showDate();

可以发现setTimeout内部的function是等待10s以后再执行的。

把时间改为0

发现它还是最后执行的

类似异步

更具体的,更详细的

Date.prototype.format = function(formatStr)
{
var str = formatStr;
var Week = ['日','一','二','三','四','五','六']; str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % )>?(this.getYear() % ).toString():'' + (this.getYear() % ));
//
this.setMonth(this.getMonth()+);
str=str.replace(/MM/,this.getMonth()>?this.getMonth().toString():'' + this.getMonth());
str=str.replace(/M/g,this.getMonth()); str=str.replace(/w|W/g,Week[this.getDay()]); str=str.replace(/dd|DD/,this.getDate()>?this.getDate().toString():'' + this.getDate());
str=str.replace(/d|D/g,this.getDate()); str=str.replace(/hh|HH/,this.getHours()>?this.getHours().toString():'' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>?this.getMinutes().toString():'' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes()); str=str.replace(/ss|SS/,this.getSeconds()>?this.getSeconds().toString():'' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds()); str=str.replace(/ffff/,this.getMilliseconds()); return str;
} function showDate(){
var date=new Date();
var str=date.format("yyyy-MM-dd HH:mm:ss:ffff");
console.log(str);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){showDate();},);
console.log("cc");
showDate();

时间为100微秒

差距都差不多,更setTimeout间隔时间无关.

那么setTimeout是不是就是运行到setTimeout时就在任务队列中添加一个方法,setTimeout时间到了就运行该方法?

其实发现不是

有特殊情况:

假如setTimeout的间隔时间小于任务队列后面运行的时间:

function showDate(){
var date=new Date();
var str=date.format("yyyy-MM-dd HH:mm:ss:ffff");
console.log(str);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){console.log("bbb");showDate();},);
console.log("cc");
showDate();
console.log("begin");
for(var i=;i<;i++){
}
console.log("end");
showDate();

 发现:setTimeout的间隔时间是近5.5s,for循环花费的时间也大概是5.5s

说明:在这种setTimeout间隔时间小于任务队列运行时间的情况下,setTimeout中的方法一直到队列任务全部完成以后才执行,间隔时间有任务队列花费时间决定。

setTimeout间隔时间大于队列任务运行时间,实际任务中大部分是这种情况

function showDate(){
var date=new Date();
var str=date.format("yyyy-MM-dd HH:mm:ss:ffff");
console.log(str);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){console.log("bbb");showDate();},);
console.log("cc");
showDate();
console.log("begin");
for(var i=;i<;i++){
}
console.log("end");
showDate();

发现尽管for循环中花费了5.5s,但是setTimeout的间隔时间依然是30s.

这时再回头看看那个setTimeout(function(){},0),间隔时间是0的情况

发现setTimeout中的方法就应该在任务队列的最后运行。

证明:js引擎按照预编译的顺序运行队列任务,这时setTimeout中的方法没有在队列中,间隔时间到了以后将setTimeout中的方法添加到任务队列中

所以,setTimeout中的方法都是在预编译中的方法后运行的

多个setTimeout中的方法运行顺序是由它们加入队列的顺序决定的。

function showDate(){
var date=new Date();
var str=date.format("yyyy-MM-dd HH:mm:ss:f");
console.log(str);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){console.log("bbb");showDate();},);
console.log("cc");
showDate();
console.log("begin");
for(var i=;i<;i++){
}
console.log("end");
showDate();
console.log("begin2");
for(var i=;i<;i++){
}
console.log("end2");
showDate();

继续分析:

1.两个setTimeout

function showDate(){
var date=new Date();
var str=date.format("yyyy-MM-dd HH:mm:ss:ffff");
console.log(str);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){console.log("bbb");showDate();},);
console.log("cc");
setTimeout(function(){console.log("ccc");showDate();},);
showDate();

2.第一个setTimeout的方法花费时间大于第二个setTimeout的间隔时间:

function showDate(){
var date=new Date();
var str=date.format("yyyy-MM-dd HH:mm:ss:ffff");
console.log(str);
}
console.log("aa");
showDate();
console.log("bb");
setTimeout(function(){console.log("bbb");showDate();},);
console.log("cc");
setTimeout(function(){
console.log("ccc");
showDate();
console.log("begin");
for(var i=;i<;i++){
}
console.log("end");
showDate();
},);
showDate();

发现:for循环花费了6s多,bbb是紧接着前一个setTimeout方法的,

http://www.cnblogs.com/littledu/articles/2607211.html

http://www.laruence.com/2009/09/23/1089.html

http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550264.html

http://www.cnblogs.com/rubylouvre/archive/2011/03/14/1982699.html

JavaScript:异步 setTimeout的更多相关文章

  1. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  2. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

  3. JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  4. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  5. javascript异步编程的前世今生,从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  6. JavaScript异步编程(2)- 先驱者:jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

  7. 【转】JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  8. 对Javascript异步执行的理解

    简单的查看了下Javascript异步编程的代码.按照网上的说法,Javascript异步编程的核心就在于setTimeout.这个系统函数让我们将函数的执行放在了一个指定的新“线程”中.于是本来的顺 ...

  9. Promises与Javascript异步编程

    Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...

随机推荐

  1. 搭建eclipse+github开发环境

    开发环境 1.jdk:jdk1.8.0_60 2.eclipse:eclipse-jee-mars-R-win32-x86_64.zip 配置步骤 1.配置本地git目录(可选) eclipse-je ...

  2. CSS3混合模式mix-blend-mode/background-blend-mode简介 ,PS中叠加效果

    一.CSS3 mix-blend-mode 首先,要知道”blend-mode”就是混合模式的意思.那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SV ...

  3. MyBabis 用法详解

    MyBatis 一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架(消除了几乎所以得JDBC代码和参数的手工设置及结果集的检索) MyBatis可以使用简单的XML或注解用于配置和原始映射,将 ...

  4. ViewPager图片切换的简单案例

    1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类. 2)ViewPager类需要一个PagerAdapter适配器类给它提供数据. 向右滑动切 ...

  5. SQL注入处理

    /// <summary> /// SQL注入处理 /// </summary> /// <param name="rowFilter">< ...

  6. CodeForces Round#313

    第一题想当然了,结果被坑.. 有1的肯定能构成所有的其他数,没有1的肯定构不成1 ,这题T T #include <iostream> #include <cstring> # ...

  7. Wpf/Wp/Silverlight-Chart图表控件:柱状图、饼状图等使用汇总

    链接:http://www.cnblogs.com/jimson/archive/2010/06/21/Wpfchat.html http://www.cnblogs.com/mgen/p/32361 ...

  8. 随堂笔记javascript篇之chrome调试:

    在征求到许老师的同意之后,我用javascript脚本语言来完成我的课堂作业,初学一门语言,刚开始也许是初生牛犊不怕虎,接受一门新的语言而且用来完成作业.一开始老师是拒绝的,他说我这样是太麻烦了.对于 ...

  9. 最小生成树のprim算法

    Problem A Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Sub ...

  10. ECMAScript 6(ES6)有什么新东西

    你可能已经听说过ECMAScript 6,JavaScript的下一个版本,它有一些非常棒的新功能.这些功能略微复杂,在简单的脚本和复杂的应用中都可以使用.在这篇文章中,我们将挑选一些ES6的功能进行 ...