图例详解那道 setTimeout 与循环闭包的经典面试题
来源:互联网 发布:什么cms建站好用 编辑:程序博客网 时间:2024/05/18 14:43
转自:www.jianshu.com/p/9b4a54a98660
http://www.toutiao.com/i6430009354899948034/
前言
如果写过js代码的人对于setTimeout方法一定不会感到陌生。setTimeout是一种定时器,在前端开发中有很多的应用场景,比如在购物车结算成功后,等待几秒会自动跳转至列表页。今天我们就深入的看下setTimeout的实现原理。
基本用法
根据W3C的标准解释,setTimeout是定义一个在指定时间后触发的函数。
我们先来看看setTimeout的基本用法,实现这样一个简单的效果,点击一个button,在3秒后页面上的文字消失。
由于这段代码非常基础,这里不做过多讲述。
setTimeout(fn, 0)
上面一部分说到setTimeout是相当于给函数定义一个‘闹钟’,当到了指定的时间后就会自动执行函数。但是如果我们将时间设置为0,即出现setTimeout(fn, 0)这样的代码,情况是怎么样的呢?是会立即执行吗?
我们可以通过以下一段代码来进行测试。
如果和我们猜测的一样,立即执行的话,上面的测试代码会按照1 > 2 > 3的顺序输出,但是实际运行后,我们发现输出结果的顺序为1 > 3 > 2,而且不管运行多少次结果都不变。
出现了这样的结果,就证明了setTimeout(0)并不是立即执行的,那这又该怎么解释呢?
JS单线程执行
为了解释上面这个问题,我们要追溯到JS执行过程,我们都知道JS是单线程执行,所有的异步事件,包括自定义的页面DOM事件,定时器,Ajax请求都会被添加到一个任务列表按照顺序执行。
因为JS脚本文件是运行在浏览器端的,我们的JS引擎虽然是单线程的,但是对于浏览器来说确是多线程的。浏览器中不仅包括JS引擎,还包括网络请求Ajax,浏览器渲染等,它们都有特定的线程去执行。
setTimeout并不能作为多线程使用,可以通过以下一段代码来证明。
对于以上一段代码,如果setTimeout可以作为多线程使用,则新的线程会在一秒后将isEnd属性设置false,那么在一秒后会alert出end字符串。
但是实际情况确是,页面从未打印出end字符串,而且页面会呈现锁死状态,这是因为isEnd变量值并未修改为false,相当于执行while(true),最终页面会崩溃。这也就能证明JS引擎是单线程执行状态。
事件队列
既然JS引擎是单线程执行,那么setTimeout定义的事件该具体何时触发呢?
这里我们需要深入到浏览器内核设计,在内核中涉及到一个事件队列的概念,我们可以直接看如下这张图。
从上面这张图很容易看出,在浏览器内核中包含了各式各样的线程,有浏览器GUI渲染线程,Javascript引擎线程,网络请求线程。
在当JS引擎执行到其他线程相关的代码时,就会执行其他线程的代码,在其他线程执行完毕后需要JS引擎重新运行时,就会在JS引擎的事件队列里添加一个任务。
现在我们来看看setTimeout(0)做了什么?它会开启一个定时器线程,并不会影响后续的代码执行,这个定时器线程会在事件队列后面添加一个任务,例如上面图中的t3。等到前面的t1,t2执行完后再去执行t3,因此在前面第二部分内容中的输出顺序为1 > 3 > 2。
setInterval
既然说到了setTimeout,就不得不提到setInterval,setInterval同样作为一种定时器,是在指定的时间间隔后执行相应的函数。
一种最常见的场景是页面上的倒计时实现。这里我们实现一个简单的效果,指定一个时间,并进行倒计时。
对比
setTimeout与setInterval虽然都是定时器,但是在执行上还是有不一样的。
setTimeout是指定的时间后执行一次;setInterval是在每隔指定的时间后执行多次。
setTimeout(fn1, t1),fn1的执行时间是大于或等于t1的;setInterval(fn2, t2),fn2的执行会始终尝试在t2时间后执行,如果网络请求较大的话,会出现fn2连续执行的情况。
- 图例详解那道 setTimeout 与循环闭包的经典面试题
- 分针网—每日分享:图例详解那道setTimeout与循环闭包的经典面试题
- 前端基础进阶(九):图例详解那道setTimeout与循环闭包的经典面试题
- setTimeout与循环闭包经典面试题详解
- setTimeout 循环闭包的经典面试题 解法与探究
- 让我理解闭包和’经典setTimeout,for循环的面试题‘的文章
- 详解setTimeOut面试题
- JavaScript同步、异步、回调执行顺序之经典闭包setTimeout面试题分析
- JavaScript同步、异步、回调执行顺序之经典闭包(setTimeout面试题分析)
- 闭包经典面试题
- 闭包与变量的面试题
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- javascript闭包经典面试题
- settimeout与闭包
- 随机数生成与排序
- LeetCode 62 Unique Paths(记忆化搜索)
- html创建定义列表
- 软件中的1、同步调用;2、回调;3、异步调用
- vs2008 控制台程序在win2000上无法运行的 提示缺少dll等问题
- 图例详解那道 setTimeout 与循环闭包的经典面试题
- android 再按一次退出程序
- JS事件--事件处理程序之DOM2事件处理程序
- react-native-prompt
- 剖析Docker文件系统:Aufs与Devicemapper
- 简单区分大端序和小端序(Little-Endian or Big-Endian)
- [李景山php] 深入理解PHP内核[读书笔记]--第三章:变量及数据类型--变量的作用域
- mvc模式的理解
- 360浏览器极速与兼容模式