异步

  • 什么是单线程,和异步有什么关系

    • 单线程,只有一个线程,只能做一件事
    • 原因,避免DOM渲染的冲突,浏览器需要渲染DOM,js可以修改DOM,js执行的时候,浏览器DOM渲染会暂停
    • 解决方案,异步
  • 什么是event-loop

    • 事件轮询,js实现异步的具体解决方案
    • 同步代码,直接执行。
    • 异步函数先放在异步队列中
    • 待同步函数执行完毕,轮询执行异步队列的函数
  • jquery deferred

    • 无法改变js异步和单线程的本质
    • 只能从写法上杜绝callback这种形式
    • 它是语法糖,但解耦了代码
    • 很好的体现:开放封闭原则,扩展开放,修改封闭
      // jquery deferred jquery1.5以后支持的写法
      var ajax=$.ajax('./data.json')
      
      ajax.done(function(){}).fail(function(){}).done(function () {})
      //或者
      ajax.then(function(){
          //成功回调
      },function(){
          // 失败回调
      }).then(function(){},function () {})
    
      function waitHandle () {
          var dtd = $.Deferred() // 创建一个deferred对象
      
          var  wait = function (dtd) {
              var task = function () {
                  console.log("执行完成")
                  dtd.resolve()// 表示异步任务已经完成
                  // dtd.reject()//表示异步任务失败或者出错
              }
              setTimeout(task,2000)
              return dtd
          }
          return wait(dtd)
      }
      var w = waitHandle()
      
      w.then(function () {
          console.log('ok1')
      },function () {
          console.log('err 1')
      }).then(function () {
          console.log('ok2')
      },function () {
          console.log('err2')
      })
    
  • promise 的基本使用和原理

    • 异常捕获
        //规定 :then只接受一个参数,最后统一用catch捕获
        result.then(function(){}).then(function () {}).catch(function () {})
      
    • 多个串联
        //串联
        var src1=""
        var result1 =loadImg(str1)
        var result2 = loadImg(str2)
        
        //链式操作
        result1.then(function (img) {
            console.log("第一个图片加载完成")
            return result2
        }).then(function (img) {
            console.log("第二个图片加载完成")
        }).catch(function () {
            
        })
      
    • Promise.all(),Promise.race() 接收一个promise对象的数组
      • Promise.all()待全部完成后,统一执行success
      • Promise.race() 只要有一个完成,就执行success
    • 标准
      • 三种状态,pending fulfilled rejected
      • Promise实例必须实现then方法
      • then 必须可以接收两个函数作为参数
      • then 返回的必须是一个Promise实例
  • async/await (和promise的区别,联系)

    • then只是将callback拆开
    • async/await 是最直接同步的写法
    • await 后面跟的是一个promise实例
    • async/await 使用了Promise 并没有和Promise冲突
    • 完全是同步的写法,没有回调函数
      loadImg()
      const load = async function () {
          const result1 = await loadImg(src1);
          console.log(result1)
          const result2 = await loadImg(src2)
          console.log(result2)
      }
      load()
    
  • 当前js解决异步的方案

    • jquery deferred
    • Promise
    • async/await
    • Genertor
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值