在前端的性能优化中,我们经常会听到有一个叫做防抖和节流的技术。
所谓的防抖就是当事件频繁连续触发的时候,我们不做处理,当事件的触发间隔大于我们设定的时间时,我们再去触发这个事件,如此就减少了事件的触发频率,而节流的思路则是不管事件触发的频率如何,我们都在指定的时间间隔内仅仅触发一次事件,说了这么多吗,我觉得还是看代码比较实在
防抖
function Debounce(fn, time){
let timer = null;
return function(){
let context = this,
args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(function(){
fn.apply( context, args);
}, time);
}
}
节流
function Throttling(fn, time){
let timer = null;
return function(){
let context = this,
args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(context, args);
timer = null;
});
}
}
}
具体的效果可以观去这个地址查看 https://alizwell.github.io/front-end/JS/DebounceThrottling.html