节流(throttle)
函数节流的目的是防止不是用用户直接控制的函数,频繁触发。
- 最常见的应用场景一般是onrize,onscroll,mousemove等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作。
- 实现的主要步骤是利用延时器延时,延时后才执行操作
var time= false;
window.onscroll = function(){
if(time=== true) return;
time= true;
setTimeout(()=>{
console.log("每隔500ms才真正触发此函数");
time= false;
},500)
}
防抖(debounce)
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
- 主要应用场景比如地图控制缩放时候只执行最后一次函数,input框输入后立即执行异步请求时等等。
- 实现的步骤主要是在定时范围内清除上一次的timer延时器。达到只执行最后一次的目的。
var timer = null;
window.onscroll = function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(()=>{
console.log("记录在300ms内最后一次被调用");
},300)
}