在Vue nextTick 中实现把一个callback插入到事件队列的方法有几种,根据兼容性不断降级。我实现了一遍这个方法,用的责任链模式,非常简洁人性。
// Promise setImmediate setTimeout MutationObserver MessageChannel
function promiseCb(callback) {
if (!Promise) return false
Promise.resolve().then(callback)
return true
}
function setImmediateCb(callback) {
if (!setImmediate) return false
setImmediate(callback)
return true
}
function MutationObserverCb(callback) {
if (!MutationObserver) return false
let counter = 1
const observer = new MutationObserver(callback)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
counter = (counter + 1) % 2
textNode.data = String(counter)
return ture
}
function MessageChannelCb(callback) {
if (!MessageChannel) return false
const channel = new MessageChannel()
const port1 = channel.port1
const port2 = channel.port2
port1.onmessage = () => {
callback()
}
port2.postMessage(1)
return true
}
function test(msg) {
return () => {
console.log(msg)
}
}
promiseCb(test(1)) || setImmediateCb(test(2)) || MutationObserverCb(test(3)) || MessageChannelCb(test(4))