setTimeout的若干坑
第一坑:作用域
首先,有一个关于this的面试题,是这样的:
- var fullname = 'John Doe';
- var obj = {
- fullname: 'Colin Ihrig',
- prop: {
- fullname: 'Aurelio De Rosa',
- getFullname: function() {
- return this.fullname;
- }
- }
- };
- console.log(obj.prop.getFullname());
- var test = obj.prop.getFullname;
- console.log(test());
主要考察的是this的指向,很明显,this是根据上下文的执行环境决定的,obj.prop.getFullname()
的上下文是obj.prop,而执行var test = obj.prop.getFullname
,实际上是window.test = obj.prop.getFullname;
所以window.test()
的this指向的是window,该题的结果为:先打印出Aurelio De Rosa,然后再打印出John Doe。但是,但问题还没有结束,变个形:
- var fullname = 'John Doe';
- var obj = {
- fullname: 'Colin Ihrig',
- prop: {
- fullname: 'Aurelio De Rosa',
- getFullname: function() {
- setTimeout(function () {
- console.log(this.fullname);
- },100);
- return this.fullname;
- }
- }
- };
- console.log(obj.prop.getFullname());
- var test = obj.prop.getFullname;
- console.log(test());
那现在呢,在setTimeout中会弹出什么?当时确实有那么几毫秒难住了我,一想,这个setTimeout,不就相当于window.setTimeout嘛,所以,setTimeout中的this依旧指向window,在setTimeout中console打印的结果为:John Doe。
第二坑:执行顺序
还是一个面试题,如下:
- setTimeout(function(){ t = false; }, 1000);
- while(true){}
- alert('end');
问题来了:alert是否能够弹出?为什么?问题的答案是:不能弹出来,因为JS的单线程的,永远的单线程。在while(true)的时候陷入了死循环,就再先出不来了。关于JS的执行机制,请看这里:JavaScript 运行机制详解:再谈Event Loop这篇文章,已经很详细了,我就不多说了。
疑惑:时间点问题
然后,同事问了我个比较诡异的问题,如下:
- console.log(1);
- setTimeout(function() {
- console.log('timeout invoke');
- console.timeEnd('timeout');
- }, 2000);
- console.log(2);
- console.time('hard');
- console.time('timeout');
- for (var i = 0;i<2000000000;i++) {}
- console.timeEnd('hard');
- console.log(3);
在chrome下,time的标志点hard的大概时间的13秒左右,那么问题来了,setTimeout的第二个参数若为2000(2秒),timeout这个时间为多少?如果为16000(16秒),时间为多少? 经过测试发现,如果这个setTimeout的时间设置为小于13秒,setTimeout会在console.log(3)后立即执行(与hard标志点间隔特别小),如果大于13秒,就在console.log(3)后的t-13秒后触发。 这就让我们很是疑惑,疑惑的点在于在浏览器内部。
- 是什么时候开始进行setTimeout的时间打点呢?
- JS是单线程的,是哪个线程打的点呢?
而经过测试发现,是在执行到setTimeout这句话的时候, 就已经打了点,如果回头执行队列的时间大于setTimeout设置的时间,就再等到了那个时间在触发setTimeout的回调, 如果小于setTimeout设置的时间,就立即执行(实际上已经延时太多了,这就是证明setTimeout不准的铁证,其实就算没有这种影响,也是不准的)。 具体可以参考这篇 JavaScript的单线程性质以及定时器的工作原理
但是第二个问题呢?我是这么想的:JS的单线程的,但是浏览器不是啊,所以是浏览器的另外一个线程负责的打点,如果您有不同的想法,请反馈给我吧,不胜感激。
最后
最近在研究一些原生JS的基础以及深入,发现真是路漫漫其修远兮,为自己加油!
setTimeout的若干坑的更多相关文章
- 微信小程序—setTimeOut定时器的坑
原文地址: http://fanjiajia.cn/2018/06/27/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94setTimeOu ...
- Linux:文件解压、复制和移动的若干坑
Linux下进行文件的解压.复制.移动应该是最常见的操作了.尤其是我们在项目中使用大量的数据集文件(比如机器学习)时.然而使用这些命令时一不留神就会掉进坑里,这篇文章我们就来细数用Shell进行文件操 ...
- geotrellis使用(二十四)将Geotrellis移植到CDH中必须要填的若干个坑
目录 前言 若干坑 总结 一.前言 近期干了一件事情,将geotrellis程序移植到CDH中(关于CDH,可以参考安装ClouderaManager以及使用ClouderaManage ...
- ulimit的坑
linux ulimit的若干坑 - ulimit真不是乱设的 原创 2016年11月16日 22:15:05 标签: linux 1997 soft和hard一起设置才好使 * soft nofil ...
- var 的一个坑,以及 let
选自 Typescript 中文教程. 快速的猜一下下面的代码会返回什么: for (var i = 0; i < 10; i++) { setTimeout(function() { cons ...
- 用python DIY一个图片转pdf工具并打包成exe
最近因为想要看漫画,无奈下载的漫画是jpg的格式,网上的转换器还没一个好用的,于是乎就打算用python自己DIY一下: 这里主要用了reportlab.开始打算随便写几行,结果为若干坑纠结了挺久,于 ...
- 用python读写excel(xlrd、xlwt)
最近需要从多个excel表里面用各种方式整理一些数据,虽然说原来用过java做这类事情,但是由于最近在学python,所以当然就决定用python尝试一下了.发现python果然简洁很多.这里简单记录 ...
- 继电器是如何成为CPU的(2)
继电器是如何成为CPU的(2) ——<穿越计算机的迷雾>整理和总结 上一篇已经从电池.开关.灯泡和继电器开始,画出了设计CPU所需的基本器件.这些器件将成为设计CPU的砖瓦木料.这一篇就用 ...
- 蓝鲸DevOps深度解析系列(2):蓝盾流水线初体验
关注嘉为科技,获取运维新知 前面一篇文章<蓝鲸DevOps深度解析系列(1):蓝盾平台总览>,我们总览了蓝鲸DevOps平台的背景.应用场景.特点和能力: 接下来我们继续解析蓝盾平台的 ...
随机推荐
- java替换字符串和用indexof查找字符
java自带替换 String s="hlz_and_hourui哈哈"; String new_S=s.replaceAll("哈", "笑毛&qu ...
- PHP基础之 define() 函数
定义和用法 define() 函数定义一个常量. 常量类似变量,不同之处在于: 在设定以后,常量的值无法更改 常量名不需要开头的美元符号 ($) 作用域不影响对常量的访问 常量值只能是字符串或数字 语 ...
- CAA调试
在需要调试的Module(*.m)上右键,选择属性,命令位置选择你的framework目录 路径选择对应工程目录下的\intel_a(或者Win64 -- 64位机器) 然后就可以尽 ...
- B - 敌兵布阵 线段树的点
B - 敌兵布阵 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descriptio ...
- 网络受限下,使用Nexus要解决的两个问题
在网络受限的情况下,使用nexus总会遇到这么两个问题,让你头疼. 我头疼过了,为了不让大家头疼,把解决方案放在这里,供大家参考. 问题一.背景: 由于网络原因,Nexus无法更新远程仓库的索引. ...
- 踩坑学php(1)
前言: 为什么要学php 呢?作为一个前端,一直有着了解后台的好奇心:作为一个计算机毕业的,一直有着实践更多设计模式和数据库相关的东西:而php 非常流行,拥有非常多的资源,入门应该容易: 为什么叫& ...
- microwindows Win32 API demo
初次使用microwindows,资料有限,我也是费了很多功夫才明白.所以记录下来,好帮助那些爱学习的童鞋,另外请大虾们多多指教. 什么是microwindows,什么作用,等背景介绍我就不多说了,因 ...
- PHP每日签到及连续签到奖励实现示例
数据库字段 num 记录已经连续签到次数 times 记录签到的日期 格式年月日 如 20160101 PHP代码如下 <?php //获取今天的日期 $today = date('Ymd'); ...
- <Web Scraping with Python>:Chapter 1 & 2
<Web Scraping with Python> Chapter 1 & 2: Your First Web Scraper & Advanced HTML Parsi ...
- 2014第7周三初识CouchBase
今天主要还是完善需求,然后提交评审流程,尽可能不纠结一些细节问题后发现自己速度更快了,或许这才是最好的顺序,其它可能的问题就留在后续发现并解决吧.今天第一次听到并重视下couchbase.上午看到同事 ...