节流和防抖
节流 连续触发的事件每隔一段时间执行。
防抖 连续触发的事件只执行一次,事件停下一段时间后才能继续触发下一次。
使用场景：
- 节流： 可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。
- 防抖：一般可以使用在用户输入停止一段时间过后再去获取数据，而不是每次输入都去获取。
节流函数 定时函数版
function throttle(fn, delay) {
let timer = null;
return function(){
if(timer) return
setTimeout(()=>{
fn.call(this, arguments);
timer = null;
}, delay)
}
}
div.addEventListener('drag', throttle(function(e){console.log(e.offsetX)},200))防抖函数
- function debounce(fn,delay) {
- let timer = null;
- return function() {
- if(timer) {
- clearTimeout(timer);
- }
- setTimeout(()=>{
- fn.call(this, arguments);
- timer = null;
- }, delay)
- }
- } 
腾讯成长空间 5977人发布