第八周第二天笔记

ES6之Promise类

1 Promise类基础知识解读

• promise类的静态属性方法
  • 分类：resolve(),reject(),all(),race()
    • resolve():作为形参传入到实例对象中，在条件满足时，作为回调函数执行，可以传入实参；then中的第一个参数回调函数接收；
    • reject():作为形参传入到实例对象中，在条件不满足时，即失败时，作为回调函数执行，可以传入实参，then中第二个参数回调函数接收，或是catch中的回调函数接收；
    • all():提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调，即当最慢的一个没有执行完时，会执行完的异步操作传入的数据，以数组的形式储存，待最慢的一个执行完，以一个数组的形式，将数据传入到then；
    • race():多个异步操作同样是并行执行的，谁最快，数据进入then；其他的异步操作会继续执行，但是then不会再接受其他异步操作的数据；
  • 使用：Promise类名调用，即Promise.all;实例对象不能使用；
• promise类原型上的属性方法
  • 分类：then()，catch()
    • then():接收第一个参数，是回调函数，并且会拿到异步操作成功后resolve传入的参数，第二个参数可有可无，如果添加，也是一个回调函数，里面拿到的是，异步操作失败后reject传入的参数；
    • catch():接受一个参数，是回调函数，第一个功能，是当异步操作失败后，接收reject传入的参数；第二个功能，是异步操作成功后，会进入then，但是在then中执行代码，报错了，然后，catch就接收到了报错的文本，然后不会终止JS，可以保证JS继续执行；
  • 使用：实例对象才能使用原型的属性方法；
• 总结：实例创建中，当满足条件后，会执行resolve(),相当于then里面匿名函数调用；相当于回调函数，而resolve可以看做then里面匿名函数的函数名；异步操作其实就是实例对象自执行；
• Promise详细解读文件

2 Promise类实例

• 实例1：图片请求超时
  • 知识点：将两个异步操作放入到race方法中，如果5秒之内图片请求成功了，那么便进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么imgTimeout最快执行，则进入catch，报出“图片请求超时”的信息。当requestImg函数中图片地址出错，图片无法正常加载，onload事件不会执行，resolve不会执行，所以不会进入then；

• 实例2：小球运动实例
  • 知识点：多次执行异步操作，执行异步操作1后，当条件满足时，会执行异步操作1中resolve(),而在异步操作1点then的匿名函数中返回另一个异步操作2；然后执行异步操作2，实质为实例对象的自执行，然后满足条件时，执行异步操作2中的resolve()，然后再在异步操作2点then的匿名函数中返回异步操作3，反复异步操作，直到最后一个异步操作中条件满足后，执行resolve(),在其后面的then匿名函数中，添加运动结束代码；

运动库

• 实例1：左右按钮点击运动
  • 知识点：
    • 边界值的判断：1）在cur累加累减之前，必须加减步长进行判断；2）在cur累加累减之后，不用加减步长进行判断，直接判断cur是否满足条件；
    • 边界值判断条件成立，执行的语句中，设置边界值，然后添加return，阻断程序执行；
    • 需注意：设置样式值，必须在边界值判断之后；；
    • 定时器的timer,设置在元素的自定义属性上，避免全局变量
    • 两个点击事件执行一个定时器时会出问题，所以需要在执行定时器之前，关闭定时器；
    • 优化思想：
      • 出现的问题：定时器中要添加函数的定义阶段，不加括号，但是针对带参数的函数，就无法只写函数名，可以新建一个匿名函数将函数调用放入匿名函数中；如：oDiv.timer=setTimeout(function(){ moveBat(target);},30)，但是这样设置会出现问题，当定时器中的moveBat(target)执行值，会查找参数target，向匿名函数查找，查找不到再向上级作用域查找，而此时定时器中的匿名函数形成的私有作用域不会被释放，每执行一次定时器，都会新建一个私有作用域，所以内存会很大，不利于优化；
      • 解决措施：在moveBat(target)函数定义中，添加一个新的函数_move()，将所有代码放入其中，在定时器中添加_move，这样当定时器执行时，就会重复调用_move函数；不会再形成匿名函数；但是需注意的是，在添加_move定义阶段后，必须执行一次；
  • 代码：

   
   
   
       
       
       
   
   
   
  向左向右
   
  太阳
   
  
   
  
   
   
   
  

• 运动库linear函数封装
  • 目的：获取运动元素的实时位置
  • 参数：
    • b:begin 运动起始位置
    • c:change 还要走多远
    • d:duration 走完剩下的路程需要的总时间
    • t:time 代表走了多少时间
  • 变量：time值为可变值，不断地累加，然后计算出实时位置；配合定时器使用；
  • 返回值：返回实时位置值；
  • 实例

• 实例：一个物体的多运动
  • 目的：实现一个物体在x,y两个方向上的同时匀速运动；
  • 思路：
    • 分别求出物体运动在x,y方向上的起始位置，目标位置，算出各自方向上的总路程；
    • 设定总时间duration；
    • 起始时间为0,即time初始赋值为0；
    • 设置定时器：1）进行time变量的累加，最好跟定时器的执行时间相同；2）边界点判断（设置目标位置、停止定时器、阻断程序执行）；3）利用linear方法获取x,y方向上的实时位置；4）设置实时位置；

   
   
   
       
       
       
   
   
   
  物体
   
  
   
   
   
   
  

• 实例：封装方法，实现物体的多运动库
  • 参数： ele：元素，target:目标值，对象，duration:运动总时间
  • 注意点：
    • 工具库的引用，需要按照引用顺序调用；
    • 在工具库中利用自执行函数封装的方法，需要设置window，将其设置成全局变量，这样才能在全局引用；
  • 工具库代码：

   (function () {
       var gbEffect={
           Linear:function(c,d,t,b){
               return c/d*t+b;
           }
       };
       function move(ele,target,duration){
           //ele:元素，target:目标值，对象，duration:时间
           duration=duration || 2000;
           var begin={},change={};
           for(var attr in target){
               begin[attr]=utils.css(ele,attr);
               change[attr]=target[attr]-begin[attr];
           }
           var time=0;
           //定时器
           var timer=setInterval(function () {
               //变量累加
               time+=10;
               //边界点判断
               if(time>=duration){
                   //设置边界值
                   console.log(1)
                   utils.css(ele,target);
                   //停止定时器
                   clearInterval(timer);
                   //阻断程序执行
                   return ;
               }
               //获取实时位置
               for(var attr in change){
                   var linear=gbEffect.Linear(change[attr],duration,time,begin[attr]);
                   //设置实时位置
                   utils.css(ele,attr,linear);
               }
           },10)
       }
       //自执行函数中与外界无联系，利用window设置为全局
       window.animate=move;
   })();
  

  • 执行代码：

   
   
  物体