防抖的延伸

场景：分页列表，若不设置loading状态，页码的点击顺序和后台返回的顺序有时会一致，产生页面渲染错误，怎么避免？

思路：

1. 多个接口调取后返回promise
2. 倘若规定1s内只发送最后一次请求，延迟发送请求，且清除其他定时器
3. 只有最后一次请求等到了resolve状态，其他都是pending，不会进入then方法

代码：

//传参，调用后台接口，返回结果
function getTwoJson(params){
  // console.log(params);
  return fetch('./2.json').then(res=>{
    return res.json()
  })
}
//返回一个promise,定时器控制
function fetchData(apiFun){
  apiFun.timer = null;
  return function(args){
    return new Promise((resolve,reject)=>{
      let {pageNumber,pageSize,timeout} = args;
      apiFun.timer && clearTimeout(apiFun.timer)
      apiFun.timer = setTimeout(()=>{
        resolve(apiFun({pageNumber,pageSize}))
      },timeout)
    })
  }
}
let getDebounceData = fetchData(getTwoJson)
getDebounceData({pageNumber:1,pageSize:10,timeout:1000}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})
getDebounceData({pageNumber:3,pageSize:10,timeout:1000}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})
getDebounceData({pageNumber:2,pageSize:10,timeout:1000}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

以上是我的思路及实现，欢迎大家指导