函数的防抖和节流

防抖（debounce）

什么是防抖？

• 一个函数被触发n秒后，才执行此函数
• 如果n秒内再次触发此函数，那么重新以再次触发的时间开始重新延迟n秒后执行此函数

这样的函数 执行行为 叫做函数防抖。

应用场景

• 监听设备窗口大小发生改变，只有停止改变后的200ms执行handleResize方法

  window.addEventListener('resize', debounce(handleResize, 200));

• 监听表单填写，表达内容改变都去请求服务端数据，在每次表单执行输入停止的500ms后，才发起请求

  input.addEventListener('change', debounce(handleRequest, 500));

代码实现

function debounce(event, delay) {
  let timer = null;
  return function (...args) {  // ...args用来接受fun原有的参数，比如事件就是event对象
    clearTimeout(timer); // 利用clearTimeout的特性，处理delay内，再此触发函数不做处理
    timer = setTimeout(() => {
      event.apply(this, args);
    }, delay);
  };
}

节流（throttle）

什么是节流？

• 单位时间内多次触发函数，函数只进行一次执行
• 如果在这个单位时间内，多余的触发，全部不做处理。使函数按照规定的速率执行

这样的函数 执行行为 叫做函数节流。

应用场景

• 滚动事件，持续滚动，间隔200ms执行

  dom.addEventListener('scroll', throttle(handleScroll, 200)); 

• 鼠标滑动事件，一秒钟大概可以执行60次。使用节流函数优化，200ms执行一次。如果不做节流处理，可想而知浏览器压力有多大

  dom.addEventListener('mousemove', throttle(handleMove, 200)); 

代码实现

function throttle(fun, delay) {            
　　let prev = Date.now();            
　　return function(...args) {   // ...args用来接受fun原有的参数，比如事件就是event对象                        
　　　　let now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　fun.apply(this, args);  
　　　　　　prev = Date.now();                                    
　　　　}            
　　}        
}

前端 · 2020年10月20日 · 被浏览 - 次