add callback to event queue

93 阅读1分钟

在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))