一、同步和异步
JavaScript是单线程语言,所以银行只有一个窗口,客户需要按一系列规则进行业务办理。
同步业务
在银行,客户到达后,首先会在大厅等候,排队办理业务。这就像 JavaScript 中的主线程(主执行栈)一样,当一个任务被执行时,其他任务需要排队等待。
当轮到某个客户时,他会走到柜台(主线程)去进行他的业务,比如存款、取款等。这相当于执行一个同步任务。在这个过程中,其他客户只能静静地等着,直到前面的客户完成业务。
同步业务遵循后来先办的原则,因为每个新来的同步任务客户会把文件放在最上面,工作人员会先办理后来的。这就像执行栈中同步任务的先进后出,后进先出原则。
异步业务
假设某个客户需要申请贷款,这个过程比较复杂,银行需要审核信息。客户在申请后并不能立即得到结果,而是会被告知“请稍后”,这就像 JavaScript 中的异步操作。此时,客户挂号进入了一个等待列表,这相当于将异步请求放入了事件队列中。
通知与回调
一旦贷款审核通过,银行会通过短信或电话通知客户,普通客户和VIP客户区别对待。这就类似于 JavaScript 中的回调函数。当异步操作完成后,它会将结果放入事件队列中,等待主线程空闲后再来处理这个结果。
事件循环
银行的工作流程就像 JavaScript 的事件循环一样。如果当前没有客户在柜台办理业务(主线程空闲),银行工作人员会查看等待列表(事件队列),然后开始处理下一个客户的请求。这种机制确保了即使有许多异步操作在进行,银行柜台(主线程)总是能够有效地处理客户。
二、宏任务与微任务(异步任务的细化)
先进先出原则
在异步任务的事件队列中,又分为宏任务和微任务,宏任务是普通客户,微任务是vip客户,他们分别站成两个不同的队,分为宏任务队列和微任务队列。先来的客户可以最先办理,因为他们先被短信通知。这就像任务队列先进先出的原则。
任务开始执行
开始办理异步任务时,会先从普通客户(script)开始。等一个普通用户办理完,柜台一旦空下来,银行工作人员会立即为VIP客户办理业务。等所有VIP客户的业务按照顺序办理完成后,柜台会为的普通客户继续办理。
执行完成
等所有异步任务队列中的客户办理完,才会继续服务同步任务中客户。
具体划分
宏任务
1、整体代码(script):一个完整的JavaScript脚本可以被视为一个宏任务。
2、setTimeout:设置一个定时器,该定时器完成后会执行一个回调函数,这个回调函数作为一个宏任务被添加到任务队列中。
3、setInterval:与setTimeout类似,但它是重复执行回调函数。
4、setImmediate(仅限Node.js):Node.js特有的API,用于在I/O事件回调之后、setTimeout和setInterval回调之前调用函数。
5、I/O:输入输出操作,如文件读写、网络请求等,虽然这些操作本身可能是异步的,但它们的回调函数通常作为宏任务处理。
6、UI渲染:浏览器在更新页面之前会等待所有的宏任务执行完毕,然后进行UI渲染。
微任务
1、Promise.then/catch/finally:当Promise状态改变(从pending变为fulfilled或rejected)时,会执行相应的then/catch/finally回调函数,这些函数作为微任务处理。
2、process.nextTick(仅限Node.js):Node.js特有的API,用于将回调函数放在当前执行栈的末尾立即执行,但在任何I/O事件之前。
3、MutationObserver:用于异步监听在某个范围内的DOM树变化。
4、requestAnimationFrame:requestAnimationFrame 的回调函数保证会在下一次浏览器重绘之前执行。
5、queueMicrotask:用于将回调函数排队到微任务队列中。
6、postMessage、MessageChannel和BroadcastChannel的回调:它们通常会涉及到回调和异步处理,比如使用send()和receive()方法,它们会触发相应的回调,这些回调会被浏览器放入微任务队列中等待执行,会间接影响任务队列的调度。
三、中断与暂停
如果银行停电了,所有业务都会暂停,等来电后,会继续为剩下的客户按顺序办理。
比如网络问题、浏览器插件、调试过程中的断点、内存不足、特定函数(如alert()
、prompt()
、confirm()
),会导致所有任务的中断和暂停。