纯JavaScript $.Deferred

Question

如果没有jQuery，我将如何编写下面的内容？

​

var dfd = $.Deferred()
dfd.done(done)
dfd.resolve()

function done() {
   console.log('done')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 1

​

    function Deferred (){
      let res,rej,p = new Promise((a,b)=>(res = a, rej = b));
      p.resolve = res;
      p.reject = rej;
      return p;
    }

​

你只需要公开决心和拒绝，才能让它发挥作用。

Answer 2

使用本机承诺的问题在于回调中提供了解决和拒绝处理程序，因此如果您尝试在实际分配它们之前调用它们。

在我看来，仅仅实现延迟的自己会更加健壮，例如：

​

function deferred() {
  let thens = []
  let catches = []

  let status
  let resolvedValue
  let rejectedError

  return {
    resolve: value => {
      status = 'resolved'
      resolvedValue = value
      thens.forEach(t => t(value))
      thens = [] // Avoid memleaks.
    },
    reject: error => {
      status = 'rejected'
      rejectedError = error
      catches.forEach(c => c(error))
      catches = [] // Avoid memleaks.
    },
    then: cb => {
      if (status === 'resolved') {
        cb(resolvedValue)
      } else {
        thens.unshift(cb)
      }
    },
    catch: cb => {
      if (status === 'rejected') {
        cb(rejectedError)
      } else {
        catches.unshift(cb)
      }
    },
  }
}

const d = deferred()

setTimeout(() => {
  d.resolve('good')
}, 1000)

// Will be called after 1s
d.then(value => console.log('#1 resolved!', value))

setTimeout(() => {
  // Will be called after 3s and executed right away as it's already resolved
  d.then(value => console.log('#2 resolved!', value))
}, 3000)

​