首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript中setTimeout的那些事儿

Posted in Javascript onNovember 14, 2016

一、setTimeout那些事儿之单线程 

一直以来，大家都在说Javascript是单线程，浏览器无论在什么时候，都且只有一个线程在运行JavaScript程序。 

但是，不知道大家有疑问没——就是我们在编程过程中的setTimeout(类似的还有setInterval、Ajax)，不是异步执行的吗？！！ 

例如：

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log("a");
   //利用setTimeout延迟执行匿名函数
   setTimeout(function(){
    console.log("b");
   },100);
   console.log("c");
  </script>
 </body>
</html>

运行代码，打开chrome调试器，得如下结果

 JavaScript中setTimeout的那些事儿

这个结果很容易理解，因为我setTimeout里的内容是在100ms后执行的嘛，当然是先输出a，再输出c，100ms后再输出setTimeout里的b嘛。 

咦，那Javascript这不就不是单线程了嘛，这不就可以实现多线程了？！！ 

其实，不是的。setTimeout没有打破JavaScript的单线程机制，它其实还是单线程。 

为什么这么说呢，那就得理解setTimeout到底是个怎么回事。 

请看下面的代码，猜结果:

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var date = new Date();
   //打印才进入时的时间
   console.log('first time: ' + date.getTime());
   //一秒后打印setTimeout里匿名函数的时间
   setTimeout(function(){
    var date1 = new Date();
    console.log('second time: ' + date1.getTime() );
    console.log( date1.getTime() - date.getTime() );
   },1000);
   //重复操作
   for(var i=0; i < 10000 ; i++){
    console.log(1);
   }
  </script>
 </body>
</html>

看了上面的代码，猜猜输出的结果是多少呢？1000毫秒？ 

我们打开chrome调试器，见下图

JavaScript中setTimeout的那些事儿 

纳尼，怎么不是1000毫秒呢？！！！ 

我们再看看下面的代码：

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   //一秒后执行setTimeout里的匿名函数，alert下
   setTimeout(function(){
    alert("monkey");
   },1000);
   while(true){};
  </script>
 </body>
</html>

运行代码后！

怎么一直刷新，浏览器卡死了呢，并且没有alert！！ 

按道理，即使我while无限循环，在1秒后也得alert一下啊。 

种种问题皆一个原因，JavaScript是单线程 。 

要记住JavaScript是单线程，setTimeout没有实现多线程，它背后的真相是这样滴： 

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。 

浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程：JavaScript引擎线程，GUI渲染线程，浏览器事件触发线程。 

*JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。 

*GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。 

*事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。 

so,通过以上讲解，以上种种问题迎刃而解。 

二、setTimeout那些事儿之延迟时间为0 

当setTimeout的延迟时间为0时，大家想想它会怎么执行呢？ 

例如下面的代码：

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log('a');
   setTimeout(function(){
    console.log('b');
   },0);
   console.log('c');
   console.log('d');
  </script>
 </body>
</html>

运行代码结果如下：

JavaScript中setTimeout的那些事儿 

假设你已经知道Javascript单线程的运行原理了。那么，可能会有这样的疑问：setTimeout的时间为0，都没加到处理队列的末尾，怎么会晚执行呢？不应该立即执行吗？ 

我的理解是，就算setTimeout的时间为0，但是它仍然是setTimeout啊，原理是不变的。所以会将其加入到队列末尾，0秒后执行。 

况且，经过查找资料发现，setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动。

 这个最小的时间间隔是多少呢？ 

这和浏览器及操作系统有关。在John Resig的《Javascript忍者的秘密》一书中提到?Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在苹果机上的最小时间间隔是10毫秒，在Windows系统上的最小时间间隔大约是15毫秒），另外，MDC中关于setTimeout的介绍中也提到，Firefox中定义的最小时间间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定义的最小时间间隔是4毫秒。 

说了这么多，setTimeout的延迟时间为0，看来没什么意义嘛，都是放在队列后执行嘛。 

非也，天生我材必有用，就看你怎么用咯。抛砖迎玉下。 

1、可以用setTimeout的延迟时间为0，模拟动画效果哦。 

详情请见下代码：

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
  <div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>
  <script>
   window.onload = function(){
    var con = document.getElementById('container');
    var btn = document.getElementById('btn'); 
    //Params: i 为起始高度，num为预期高度
    function render(i, num) {
     i++; 
     con.style.height = i + 'px';
     //亮点在此
     if(i < num){
      setTimeout(function() {
       render(i, num);
      },0);
     }
     else {
      con = null;
      btn = null;
     }
    };
    btn.onclick = function(){
     render(100, 200);
    };
   };
  </script>
 </body>
</html>

由于是动画，所以想看其效果，还请各位看官运行下代码哦。 

代码第19行中，利用setTimeout，在每一次render执行完成（给高度递增1）后，由于Javascript是单线程，且setTimeout里的匿名函数会在render执行完成后，再执行render。所以可以实现动画效果。 

2、可以用setTimeout的延迟时间为0，实现捕获事件哦。 

当我们点击子元素时，我们可以利用setTimeout的特性，来模拟捕获事件。 

请见如下代码：

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style> 
   #parent {
    width:100px;
    height:100px;
    border:1px solid black;
   } 
   #child {
    width:50px;
    height:50px;
    background:pink;
   }
  </style>
 </head>
 <body>
  <div id="parent">
   <div id="child"></div>
  </div>
  <script>
   //点击子元素，实现子元素的事件在父元素触发后触发
   window.onload = function(){
    var parent = document.getElementById('parent'); 
    var child = document.getElementById('child');
    parent.onclick = function(){
     console.log('parent');
    }
    child.onclick = function(){
     //利用setTimeout，冒泡结束后，最后输出child
     setTimeout(function(){
      console.log('child'); 
     },0);
    }
    parent = null;
    child = null; 
   }
  </script>
 </body>
</html>

 执行代码，点击粉红色方块，输出结果： 

JavaScript中setTimeout的那些事儿

三、setTimeout那些事儿之this 

说到this，对于它的理解就是：this是指向函数执行时的当前对象，倘若没有明确的当前对象，它就是指向window的。 

好了，那么我们来看看下面这段代码：

<!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var name = '!!';
   var obj = {
    name:'monkey',
    print:function(){
     console.log(this.name);
    },
    test:function(){
     //this.print
     setTimeout(this.print,1000);
    }
   }
   obj.test();
  </script>
 </body>
</html>

通过chrome调试器，查看输出结果： 

JavaScript中setTimeout的那些事儿

咦，它怎么输出的是”!!”呢？不应该是obj里的”monkey”吗？！！ 

这是因为setTimeout中所执行函数中的this，永远指向window。 

不对吧，那上面代码中的setTimeout(this.print,1000)里的this.print怎么指向的是obj呢？！！ 

注意哦，我这里说的是“延迟执行函数中的this”，而不是setTimeout调用环境下的this。 

什么意思？ 

setTimeout(this.print,1000)，这里的this.print中的this就是调用环境下的； 

而this.print=function(){console.log(this.name);}，这个匿名函数就是setTimeout延迟执行函数，其中的this.name也就是延迟执行函数中的this啦。 

嘿嘿，这下明白了吧。

var age = 24;
function Fn(){
 this.age = 18;
 setTimeout(function(){
  //this代表window
  console.log(this);
  //输出24，而不是Fn的18
  console.log(this.age);
 },1000);
}
new Fn();

咦，那有个疑问，比如我想在setTimeout延迟执行函数中的this指向调用的函数呢，而不是window？！！我们该怎么办呢。 

常用的方法就是利用that。 

that？ 

对，that。利用闭包的知识，让that保证你传进去的this，是你想要的。 

详情见下:

var age = 24;
function Fn(){
 //that在此
 var that = this;
 this.age = 18;
 setTimeout(function(){
  console.log(that);
  console.log(that.age);
 },1000);
}
new Fn();

还有一种方法就是，利用bind。 

如下:

var age = 24;
function Fn(){
 this.age = 18;
 //bind传入this
 setTimeout(function(){
  console.log(this);
  console.log(this.age);
 }.bind(this),1000);
}
new Fn();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript中setTimeout的那些事儿

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
原生js 秒表实现代码
Jul 24 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
js 自动播放的实例代码
Nov 19 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
vue实现登录功能
Dec 31 Vue.js
jquery css实现邮箱自动补全
Nov 14 #Javascript
JS常用算法实现代码
Nov 14 #Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 #Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 #Javascript
JS实现的几个常用算法
Nov 12 #Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 #Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 #Javascript
minio(1) 黑屏(2) celery(1) tree shaking(1) Outlook(1) appdata(1) SeaTable(1) OOP(1) MutationObserver(1) Mysql8(2)
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
泰国国际航空公司官网：Thai Airways International
2019/12/04 全球购物
毕业设计计划书
2014/01/09 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
教师求职自荐信
2014/03/09 职场文书
捐赠仪式主持词
2014/03/19 职场文书
班长竞选演讲稿
2014/04/24 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
《自己去吧》教学反思
2016/02/16 职场文书