一、区别
节流强调的是n秒内函数最多触发一次,注意这里的用词最多,也就是可能不触发,一般第一次和最后一次可能不会触发;
防抖强调的是函数两次调用的间隔必须大于n秒,如果函数触发的频率一直小于n秒,那么只有最后一次才会触发函数执行
二、场景
节流:当给document加scroll事件时,假定处理函数为fn,那么当滑动鼠标时scroll事件会不断的被触发,影响滑动性能,这时可以用节流处理一下 throttle(fn,time),可以保证fn在time时间内只触发一次
防抖:当做随着输入框输入不同内容展示不同的结果列表类似需求时,一般会绑定input的change事件,该事件在用户输入过程中会多次被触发,这时可以用防抖处理一下 debounce(fn,time),可以保证在用户输入完time时间后才触发fn。这里不用 throttle,因为debounce更加符合
三、简易实现
throttle:节流
function throttle(fn,time,imediate) {
let timer = null;
return function() {
const args = arguments;
const _this = this;
const callNow = imediate && !timer
if (timer) {
return;
}
timer = setTimeout(()=>{
timer = null;
},time);
if(callNow){
fn.apply(_this,args);
}
}
}
debounce:
function debounce(fn,time,imediate) {
let timer = null;
return function() {
const args = arguments;
const _this = this;
const callNow = imediate && !timer
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(()=>{
timer = null;
},time)
if(callNow){
fn.apply(_this,args);
}
}
}
交流
共同进阶学习
学习之余,大家一起来薅羊毛喽,各取所需。