利用jquery的$.deferred对象构建异步等待

异步等待代码–$.Deferred()对象
deferred对象是jQuery提供的一个延迟对象,和promise比较相似,但这个对象可以用在程序中阻塞程序,这里介绍的几个这里需要用到的三个方法:
1,deferred.resolve(args) 解决递延对象,并根据给定的参数调用任何完成的回调函数。
2,deferred.reject(args) 拒绝延迟对象,并根据给定的参数调用任何失败的回调函数。
3,deferred.promise([type],[target]) 返回一个 Promise 对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成。
这里的第3点可以理解为一个“开关”,它会在程序需要的地方插入;

举个简单的例子:

const def1 = $.Deferred()
const def2 = $.Deferred()

function waitDefer() {
      new Promise(async () => {
        console.log('1---')
        await def1.promise()
        console.log('2---')
      })

      new Promise(async () => {
        console.log('3---')
        await def2.promise()
        console.log('4---')
      })
     console.log('5---')
    }

waitDefer()

setTimeout(() => {
    def1.resolve()
}, 2000)

setTimeout(() => {
    def2.resolve()
}, 1000)

最终的执行顺序是1、3、5、4、2

Tips: JS虽然是只有一个单线程在运行,但是所谓的“单线程”只是一个物理条件,而不是业务上的逻辑条件。在一个单线程中,有一个Promise队列, 和一个任务调度器,任务调度器从队列中取出一个Promise并运行该Promise, 但调度器不会说等到Promise运行完成了之后才执行下一个Promise, 在某一个Promise里面, 一旦出现了await语句, 就相当于Promise自身放弃了执行权, 这时调度器会开始执行下一个Promise, 所以对之前那个Promise来说, 就好像卡死了一样, 得不到执行. 这种不会卡物理线程的等待, 我们叫做异步等待. 直到之前那个Promise的await完成, 它会把剩下的代码包装成一个新的Promise, 提交到调度器的Promise队列中, 等待下一次执行机会 --from longlongli

你可能感兴趣的:(web)