首页
所有分类
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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法
Feb 06 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
JS实现简单九宫格抽奖
Jun 28 Javascript
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
马耳他购物网站(1) 哈萨克斯坦购物网站(2) 亚洲购物网站(6) 白俄罗斯购物网站(3) 冰岛购物网站(1) 乌克兰购物网站(27) 约旦购物网站(1) 保加利亚购物网站(3) 希腊购物网站(6) 罗马尼亚购物网站(10)
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
常见的python正则用法实例讲解
2016/06/21 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python中partial()基础用法说明
2018/12/30 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
纽约复古灵感的现代珠宝品牌：Lulu Frost
2018/03/03 全球购物
瑞典香水、须后水和美容产品购物网站：Parfym-Klick.se
2019/12/29 全球购物
小学学校评估方案
2014/06/08 职场文书
课外科技活动总结
2014/08/27 职场文书
导游词怎么写
2015/02/04 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
创业开店，这样方式更合理
2019/08/26 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
如何使用vue3打造一个物料库
2021/05/08 Vue.js
virtualenv隔离Python环境的问题解析
2022/06/21 Python