防抖和节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。
通常这种情况下我们怎么去解决的呢?一般来讲,防抖和节流是比较好的解决方案。
防抖:
多次触发某个方法的间隔小于一个固定周期则只执行最后一次。
节流:
触发某个方法后的一个固定周期内再次触发该方法则不执行。
code:
// 函数节流
function thnottle(fn, wait){
let last = 0:
let dur = wait || 400;
return function(){
let self = this:
const current time = +new Date();
if (current_time - last > dur) {
fn.apply(self,arguments);
last = +new Date();
}
}
}
// /*函数防抖*/
function debounce(fn, wait){
let timer;
let dur = wait400; //间隔时间,如果wait不传,则默认400ms
return function() {
clearTimeout(timer);
let self = this;
let args = arguments; //保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function(){
fn.apply(self,args);
}, dur);
}
}
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140
如果想学习更多可以参考这个:https://www.jianshu.com/p/c8b86b09daf0