心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

EventLoop

发布时间：2022-07-02 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了EventLoop，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 JavaScript是一门单线程执行的编程语言。也就是说，同一时间只能做一件事。

单线程执行任务队列的问题：
如果 前一个任务非常耗时 ，则后续的任务就不得不一直等待，从而导致 程序假死 的问题。

1.同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：

1.同步任务（synchronous）

 又叫做非耗时任务，指的是在主线程上排队执行的那些任务，只有前一个任务执行完毕，才能执行后一个任务。

2.异步任务（asynchronous）

又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行  当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数。

2. 同步任务和异步任务的执行过程

EventLoop

1. 同步任务由 JavaScript 主线程次序执行
2. 异步任务委托给宿主环境执行
3. 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
4. JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行
5. JavaScript 主线程不断重复上面的第 4步

JavaScript 主线程从“任务队列”中读取异步 任务的回调函数，放到执行栈中依次执行 。这个过程是循环不断的，所以整个的这种运行机 制又称为 EventLoop （事件循环）

 案例：判断输出顺序

import thenFs from 'then-fs'

console.log('a');

thenFs.readFile('1.txt', 'utf-8').then(dataStr => {
    console.log('b');
})

setTimeout(() => {
    console.log('c');
}, 0)

console.log('d');
正确的输出结果：ADCB。其中：
A 和 D 属于 同步任务 。会根据代码的先后顺序 依次被执行
C 和 B 属于 异步任务 。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行

3.1宏任务和微任务

EventLoop

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
① 宏任务 （macrotask）
  异步 Ajax 请求、
  setTimeout、setInterval、setImmediate、
script（整体代码）、
I/O操作等
 
② 微任务 （microtask）
Promise.then、.catch 和 .finally
process.nextTick
MutationObserver等  

3.2宏任务和微任务的执行顺序

EventLoop

每一个宏任务执行完之后，都会检查 是否存在待执行的微任务 ，
如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
案例1： 
setTimeout(() => {
    console.log('1');
})

new Promise(res => {
    console.log('2');
    res()
}).then(() => {
    console.log('3');
})

console.log('4');
正确的输出顺序是：2431
分析：
① 先执行所有的 同步任务 ===>  执行第 6 行、第 12 行代码
② 再执行 微任务               ===>  执行第 9 行代码
③ 再执行 下一个宏任务    ===>  执行第 2 行代码
案例2： 
console.log('1');//
setTimeout(() => {
    console.log('2');//
    new Promise(resolve => {
        console.log('3');//
        resolve()
    }).then(() => {
        console.log('4');//
    })
})
new Promise(resolve => {
    console.log('5');//
    resolve()
}).then(() => {
    console.log('6');//
})
setTimeout(() => {
    console.log('7');//
    new Promise(resolve => {
        console.log('8');//
        resolve()
    }).then(() => {
        console.log('9');//
    })
})
正确的输出顺序是：156234789

脚本宝典总结

以上是脚本宝典为你收集整理的EventLoop全部内容，希望文章能够帮你解决EventLoop所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPPythonPython3SQLVueVue.jsJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程