JS防抖和节流，⼿写实现
js控制滚动条⼀、什么是防抖和节流？
函数防抖和节流，都是控制事件触发频率的⽅法。
防抖：假设函数持续多次执⾏，我们希望让它冷静下来再执⾏。也就是当持续触发事件的时候，函数是完全不执⾏的，等最后⼀次触发结束的⼀段时间之后，再去执⾏。
节流：让函数有节制地执⾏，⽽不是毫⽆节制的触发⼀次就执⾏⼀次。
什么叫有节制呢？就是在⼀段时间内，只执⾏⼀次。
节流顾名思义则是将减少⼀段时间内触发的频率，指定时间间隔内只会执⾏⼀次任务。
防抖场景
⽂本输⼊的验证，连续输⼊⽂字后发送 AJAX 请求进⾏验证，验证⼀次就好。
监听⼀个输⼊框的，⽂字变化后触发change 事件
直接⽤keyup 事件，则会频发触发change事件
防抖:⽤户输⼊结束或暂停时，才会触发change事件
⽤户快速点击翻页时，只需要执⾏⽤户最后⼀次希望到达的页数即可，中间页数都是⽤户不希望看到的，使⽤防抖函数可以有效的减少发送请求的次数
节流场景
懒加载要监听计算滚动条的位置，使⽤节流按⼀定时间的频率获取
DOM 元素的拖拽功能实现（mousemove）
拖拽⼀个元素时，要随时拿到该元素被拖拽的位置
直接⽤drag事件，则会频繁触发，很容易导致卡顿
节流：⽆论拖拽速度多快，都会每隔100ms触发⼀次
⼆、初步实现
防抖
const input = document.querySelector('#input');
let timer =null;
input.addEventListener('keyup',function(){
clearTimeout(timer);
timer =setTimeout(()=>{
// 模拟触发change事件
console.log(input.value);
},500);
});
节流
const div1 = ElementById('div1'); let timer =null;
div1.addEventListener('drag', e =>{
if(timer){
return;
}
timer =setTimeout(()=>{
console.log(e.offsetX, e.offsetY);
timer =null;
},100);
});
三、函数封装
防抖封装
function debounce(fn, delay =500){
/
/ timer 是在闭包中的
let timer =null;
return function(){
clearTimeout(timer);
timer =setTimeout(()=>{
fn.apply(this, arguments);
}, delay);
};
}
input.addEventListener(
'keyup',
debounce(function(){
console.log(input.value);
})
);
节流封装
div1.addEventListener(
'drag',
throttle(function(e){
console.log(e.offsetX, e.offsetY);
})
);
function throttle(fn, delay =100){
let timer =null;
return function(e){
if(timer){
return;
}
timer =setTimeout(()=>{
fn.apply(this, arguments);
// fn(e)
timer =null;
}, delay);
};
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。