函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
简单的说,当一个动作连续触发,则只执行最后一次。
打个比方,坐公交,司机需要等最后一个人进入才能关门。每次进入一个人,司机就会多等待几秒再关门。
限制一个函数在一定时间内只能执行一次。
举个例子,乘坐地铁,过闸机时,每个人进入后3秒后门关闭,等待下一个人进入。
连续的事件,只需触发一次回调的场景有:
间隔一段时间执行一次回调的场景有:
函数防抖的简单实现:
1 const _.debounce = (func, wait) => { 2 let timer; 3 4 return () => { 5 clearTimeout(timer); 6 timer = setTimeout(func, wait); 7 }; 8 };
函数防抖在执行目标方法时,会等待一段时间。当又执行相同方法时,若前一个定时任务未执行完,则 clear
掉定时任务,重新定时。
1)函数节流的 setTimeout
版简单实现
1 const _.throttle = (func, wait) => { 2 let timer; 3 4 return () => { 5 if (timer) { 6 return; 7 } 8 9 timer = setTimeout(() => { 10 func(); 11 timer = null; 12 }, wait); 13 }; 14 };
函数节流的目的,是为了限制函数一段时间内只能执行一次。因此,通过使用定时任务,延时方法执行。在延时的时间内,方法若被触发,则直接退出方法。从而,实现函数一段时间内只执行一次。
2)函数节流的时间戳版简单实现
根据函数节流的原理,我们也可以不依赖 setTimeout
实现函数节流。
1 const throttle = (func, wait) => { 2 let last = 0; 3 return () => { 4 const current_time = +new Date(); 5 if (current_time - last > wait) { 6 func.apply(this, arguments); 7 last = +new Date(); 8 } 9 }; 10 };
其实现原理,通过比对上一次执行时间与本次执行时间的时间差与间隔时间的大小关系,来判断是否执行函数。若时间差大于间隔时间,则立刻执行一次函数。并更新上一次执行时间。
相同点:
setTimeout
实现。不同点:
原文:https://www.cnblogs.com/8023-CHD/p/11398969.html