JavaScript 定时器函数异步原理

黑眼睛的姑娘 2019-11-18 129 阅读

JavaScript当前有两个定时器函数,setTimeout与setInterval方法。
首先再来明确一下什么异步操作,异步操作的有点是什么。
所谓异步操作就是在同一时刻可以做多件事情,而不是所有事情在同一个队列排队等待执行。
大家最为熟知的一个就是ajax异步请求,当向服务器请求数据的时候,不会堵塞其他代码的执行。
明晰了异步操作的特点,那么它的有点也不言而明,同一时刻可以做多件事情自然比同一时刻只能做一件事情要好。
如果JavaScript没有异步操作,那么将会寸步难行,会被卡死。
大家都知道setTimeout与setInterval方法可以实现异步操作,可能还有一点疑问。
首先看一段代码实例:

<script>
function front(){
// code
}
front();

setTimeout(function(){
// code
},5000);
</script>

假设front方法执行需要花费4秒时间,代码分析如下:
(1).JavaScript是单线程的,这个应该没有什么疑问。
(2).front方法执行完毕后,再过1秒,定时器的回调函数就会执行,这是司空见惯的操作。
(3).下面按照JavaScript是单线程这理论去解析代码,既然是单线程的,当front的方法执行的时候,定时器函数肯定没有得到执行,只有当front函数执行完毕,setTimeout方法再去执行,然后5秒后执行它的回调函数,这很明显与事实不符。
(4).原因是这样的,虽然JavaScript是单线程的,但是它的执行环境,也就是浏览器是多线程的,时间计数并不是由JavaScript现成来完成,而是由浏览器的某个现成完成,所以定时器函数能够实现异步操作。

最新游戏