1. 什么是防抖
场景:比如快速多次点击轮播图的箭头按钮时,由于上一次图片切换还未结束,就开始了下一次图片切换,于是出现抖动现象。再比如输入关键字查询,每次输入时都触发事件并发起请求,而用户只需要最后一次的查询结果。
解决方案:定时器。
function debounce(fn, delay){
var timer = null;
if(timer){
clearTimeout(timer)
}else{
timer = setTimeout(function(){
fn.call(this)
}, delay)
}
}
btnEl.onclick = debounce(function(){
// 业务代码
}, 1000)
2. 节流
场景:假如快速上拉加载20次,那么瞬间就会向服务器发送十次请求,这样便使页面加载速度变的很慢。而我们需要的是在规定的时间内只允许发送一次请求,超出这个时间再发送下一次请求。或者这么解释,当快速上拉加载20次,每次间隔时间很短,总体用时2s,那么假如规定只能500ms发出一次请求,那么较于上次发起请求的时间低于500ms的就不能发起请求了,所以,20次中只发起了5次请求(要加上第一次)。
解决方案1:时间戳
function throttle(fn,delay){
var start = 0;
var now = new Date()
if(now - start > delay){
return function(){
fn.call(this)
start = now
}
}
}
解决方案2:定时器
function throttle(fn, delay){
var timer = null;
var _this = this;
if(!timer){
return function(){
timer = setTimeout(function(){
fn.call(_this)
timer = null
},delay)
}
}
}