防抖动数据请求

同页面，多模块，同时请求同一接口

解决方案

• list 为全局暂时记录
• fun 为请求Promise事例

const list = {};
debounce(fun) { 
            
            return new Promise((resolve, reject) => { 
                let d = Date.now();
                list[d] = [resolve, reject];
                //console.log(list);
                if (!list["time"]) { 
                    list["time"] = true;
                    let type = null, data = [];
                    fun.then(d => { 
                        type = 0;
                        data = d;
                    })
                    .catch(e => { 
                        type=1
                    })
                    .finally(d => { 
                        for (let i in list) {
                            if (Array.isArray(list[i])) { 
                                list[i][type](data);
                            }
                        }
                        list = {};
                        
                    })
                    
                }
                
                
            })
            
}
复制代码

调用

效果是只调用一次，返回多个结果

this.debounce(server.serverSearchNews({
            "page": {
                "maxResultCount": 20,
                "pageNo": 1,
                "pageSize": 5,
                "skipCount": 0
            }
        }));
this.debounce(server.serverSearchNews({
             "page": {
                 "maxResultCount": 20,
                 "pageNo": 1,
                 "pageSize": 5,
                 "skipCount": 0
             }
         }))
this.debounce(server.serverSearchNews({
             "page": {
                 "maxResultCount": 20,
                 "pageNo": 1,
                 "pageSize": 5,
                 "skipCount": 0
             }
         }));
this.debounce(server.serverSearchNews({
             "page": {
                 "maxResultCount": 20,
                 "pageNo": 1,
                 "pageSize": 5,
                 "skipCount": 0
             }
         }));
复制代码

出现问题

若是将 //console.log(list); 打开则显示正常，可是若是将其注释则只成功1个或两个，没有找到具体缘由，由于初步怀疑是时间戳作key因运行速度快几乎同时，key重复形成的，因此改动代码,在时间戳部分加入 let d = Date.now() + (LIST["time"] || 0); 增长访问惰性，解决问题，可是具体形成缘由，有两个怀疑点。

1. =>箭头函数将做用域过早执行相似[Date.now(),Date.now(),Date.now(),Date.now()] 获得结果是相同的。
2. 执行速度过快，key值重复。

解决

debounce(fun) { 
          
           return new Promise((resolve, reject) => { 
               let d = Date.now() + (LIST["time"] || 0);
               LIST[d] = [resolve, reject];
               LIST["time"] && clearTimeout(LIST["time"]);
               LIST["time"] = setTimeout(() => {
                   let type = null,
                       data = [];
                   fun.then(d => {
                           type = 0;
                           data = d;

                       })
                       .catch(e => {
                           type = 1
                       })
                       .finally(d=>{
                           console.log(LIST);
                           for (let i in LIST) {

                               if (Array.isArray(LIST[i])) {
                                   LIST[i][type](data);

                               }
                           }
                           LIST = {};

                       })
               })
             
           })
           
   }

   
let LIST = {};
复制代码