JavaScript-事件循环-eventLoop

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_33827590

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量67

点赞数

文章标签： javascript 数据结构与算法 ViewUI

原文链接：https://juejin.im/post/5b3b7b3d6fb9a04f8214df8f

版权

首先看三个问题

定时器真的是定时执行的吗?
定时器的回调函数是在分线程上执行的吗?
定时器是如何执行的呢?

先来看一段代码

document.getElementById('btn').onclick = function(){
    var start = Date.now()
    console.log('定时执行开始')
    setTimeout(function(){
        console.log('定时执行中')
        console.log('定时执行了 ', Date.now() - start)
    },200)
    console.log('定时执行结束')
}
复制代码

再提问题

这几个console.log 打印的顺序是什么样的?
定时器执行了多长时间?

好继续

document.getElementById('btn').onclick = function(){
    var start = Date.now()
    console.log('定时执行开始')
    setTimeout(function(){
        console.log('定时执行中')
        console.log('定时执行了 ', Date.now() - start)
    },200)
    console.log('定时执行结束')
    //一个很长时间的操作
    for (var i = 0; i < 10000000000; i++){}
}
复制代码

继续提问题

这时候定时器执行了多长时间呢?

好,回答上面第一个问题

通过上面的代码发现,定时器并不能保证真正的定时执行
正常来说定时器会延迟一点点,这个我们是可以接受的,
但是有的时候会延迟很长时间,这个我们完全接受不了

继续看一段代码

setTimeout(function(){
    console.log('2s后执行')
},2000)
setTimeout(function(){
    console.log('1s后执行')
},1000)
setTimeout(function(){
    console.log('0s后执行')
},0)
function fn(){
    console.log('fn')
}
fn()
console.log('alert 之前')
alert('暂停主线程')
console.log('alert 之后')
复制代码

请问执行结果是什么样的?

在这里发现了点端倪

先打印了fn()
打印了alert之前
然后执行了alert,因为alert有暂停主线程的功能,同时也能暂停计时
点击了确定才打印alert之后,然后0s后执行,1s后打印1s后执行...

通过这个操作发现了点问题

这块就有个代码分类的问题:

初始化代码
回调代码

js引擎执行流程

首先会先执行初始化代码包括(设置定时器,绑定监听,发送ajax...)
然后在后面的某个时刻才会执行回调代码

回答第二个问题

如何证明js执行时单线程的呢?

刚才执行的代码,以及打印的结果可以发现,代码的执行顺序都是沿着一条线走下来的,alert有暂停主线程的功能,当暂停的时候,setTimeout定时里面的代码并没有执行,哪怕过上一天,只要不点确定按钮,他就不会执行,当点击了确定按钮,发现定时器按照设定好的时间间隔进行执行打印,最奇怪的就是0s执行为什么也是在alert之后打印,因为回调函数属于回调代码,只有初始化代码执行完之后才会执行回调代码

为什么js要用单线程模式

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题

事件驱动模型

从上面图发现分为三部分& 回答第三个问题

js引擎的堆栈模块
浏览器负责的WebAPIs模块=> 事件管理模块
还有一个回调函数队列

执行顺序

首先会先执行执行栈中的操作,也就是stack中的操作
事件管理模块会将dom事件(onClick...),ajax,setTimeout事件的回调函数添加进回调队列中(当延时方法到达触发条件，即到达设置的延时时间时，这一延时方法被添加至任务队列里)
执行引擎在主线程方法(执行栈)执行完毕，到达空闲状态时，会从回调队列中顺序获取任务来执行，这一过程是一个不断循环的过程

任务队列

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。所有任务可以分成两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。
只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。
所谓"回调函数"，就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是，由于存在后文提到的"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。