事件与微任务

顺序

查资料可知，同一个事件多次注册，会按照顺序执行。

微任务，会在当前主线程处理完后，下一个事务触发前处理完微任务。

但是事件之间，微任务会在事件处理完后还是前。

测试代码

document.addEventListener('mousemove', function (event) {
	console.log('mousemove1')

	setTimeout(() => {
		console.log('setTimeout')
	})
	Promise.resolve().then(function () {
		console.log('Promise')
	})
	queueMicrotask(() => {
		console.log('queueMicrotask')
	})
})
document.addEventListener('mousemove', function (event) {
	console.log('mousemove2')
})
document.addEventListener('mousemove', function (event) {
	console.log('mousemove3')
})

console.log('sync')

测试结果

sync
mousemove1
Promise
queueMicrotask
mousemove2
mousemove3
setTimeout
mousemove1
Promise
queueMicrotask
...

事件之前顺序执行，微任务会在一个事件处理后理解执行。

微任务之间保持先后顺序

setTimeout 能够在事件与微任务执行之后执行

setTimeout 多次执行

当事件触发太快时，setTimeout 会继续被下一轮推后

sync
mousemove1
Promise
queueMicrotask
mousemove2
mousemove3

mousemove1
Promise
queueMicrotask
mousemove2
mousemove3
setTimeout
setTimeout

原本希望设置一个 事件后执行逻辑，看样子 setTimeout 和微任务都不行。