先了解防抖和节流的区别:
两者的区别这位博主讲得非常仔细
在写项目的过程中,经常会遇到这样一种场景:
页面加载时,遇到大量的数据需要显示,常常使用上拉加载更多数据,从而实现数据的批量显示。每次上拉的时候,浏览器应该发送一次请求,获取最新的数据。
但是会出现这样一种情况:不停地上拉加载,上一个请求还没有成功返回数据,下一个请求又发出去了,导致请求越来越多,页面却还没显示数据,容易造成浏览器卡死。
解决方法:使用节流处理。在发送请求之前,先判断当前是否有其它请求在发送,如果有,则不发起下一个请求,等到上个请求已经成功返回数据了,才能发起下一个请求。
定义一个变量doneLoading,称之为节流阀,当它为true时表示请求已经发送完成,为false时表示请求正在发送。
具体实现:
list: [],
doneLoading: true, // 节流阀
// ...
getList: async function () {
// 如果当前请求未结束,则等待请求完成
if (!this.doneLoading) {
return
}
// 请求正在发送
this.doneLoading = false
const res = await request('/list', {page: this.page})
if(res.code !== 200) {
alert('数据加载失败!')
return
}
this.list = this.list.concat(res.result)
// 成功返回数据,请求完成
this.doneLoading = true
},