zoukankan      html  css  js  c++  java
  • promise加载队列实现

    let arr = [1,2,3];

    arr .reduce((promise,current)=>{

      return promise.then(()=>{

        return new Promise(resolve=>{

          setTimeout(()=>{

            console.log(current);

            resolve()

          },1000)

        })

      })

    },Promise.resolve())

    //总结:想要依次加载,上一个promise必须为完成状态,那么.then()里面的内容才可以继续执行,.then()之后的队列想要继续执行,那么当前.then()同样需要返回一个成功状态的promise

    队列渲染示例:

    let data = [
      {
        id:1,
        name:'jay',
        email:'jayking1314@126.com'
      },
      {
        id:2,
        name:'see',
        email:'jayking1314@126.com'
      }
    ]

    function getUser(name){
      return new Promise((resolve,reject)=>{
        let theData = null;
        for(v of data){
          if(v.name === name){
            theData = v;
            break;
          }
        }
        if(theData){
          resolve(theData);
        }
        else{
          reject('no data...')
        }
      })
    }


    class User{
      constructor(name) {
        this.name = name;
      }
      render(users){
        users.reduce((promise,current)=>{
          return promise.then(()=>{
            return getUser(current).then(res=>{
              return this.view(res);
            })
          })
        },Promise.resolve())
      }
      view(user){
        return new Promise(resolve=>{
          setTimeout(()=>{
            let h2 = document.createElement('h2');
            h2.innerHTML = user.name;
            document.body.appendChild(h2);
            resolve();
          },1000)
        })
      }
    }

    new User().render(['jay','see']);

  • 相关阅读:
    相交链表 3种方法
    旋转数组 空间复杂度为O(1) 的2 种方法 + 1种空间复杂度O(n)
    各种sort排序总结
    我写过的bug...
    裸BFS题若干
    luence
    mysql 找出外键等约束
    mysql (8.0 或以下)数据 卸载, 安装, 创建用户, 赋权
    navicat 导入sql文件 的正确方法
    [转] git clone 远程分支
  • 原文地址:https://www.cnblogs.com/jayking1314/p/14914340.html
Copyright © 2011-2022 走看看