event loop笔记（一）

event loop笔记（一）

button.addEventListener('click',() => {
	Promise.resolve().then(() => {console.log('Microtask 1')})
	console.log('Listener 1')
})
button.addEventListener('click',() => {
	Promise.resolve().then(() => {console.log('Microtask 2')})
	console.log('Listener 2')
})

用法一

用户点击事件——输出为：Listener 1, Microtask 1, Listener 2, Microtask 2

过程如下：
①第一个listener压入stack
②将微任务1排队
③log(‘Listener 1’)
④listener执行完，stack清空
⑤微任务1被送入stack
⑥log(‘Microtask 1’)
⑦stack和微任务队列被清空
⑧第二个listener被压入stack，重复以上


用法二

button.click()——输出为：Listener 1, Listener 2, Microtask 1, Microtask 2

①第一个listener压入stack
②将微任务1排队
③log(‘Listener 1’)
④click()还没返回，导致stack中仍保留第一个listener
⑤第二个listener被压入stack
⑥将微任务2排队
⑦log(‘Listener 2’)
⑧所有listener执行完毕，click()返回，stack被清空
⑨微任务队列按顺序（先进先出）将各微任务送入stack
⑩log(‘Microtask 1’)，log(‘Microtask 2’)