防抖与节流

防抖与节流是常用的前端优化方式，这里对防抖节流进行个人总结。

防抖：防抖就是在一段时间内只会触发一次事件，并在setTimeout后延时一段时间后触发

 

    debounce = (fn, wait) => {
      let timer = null
      return function () {
        if (timer !== null) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, wait)
      }
    }

 

补充一个防抖立即执行： 

/**
 * 防抖函数
 * @param method 执行函数
 * @param delay 延迟时间 ms
 * @param immediate 是否立即执行
 */
const debounce = (method: (...args: any[]) => any, delay: number, immediate: boolean = true): any => {
  let timer: any;
  function debounced(...args: any[]): any {
    const context = this;
    if (timer) {
      clearTimeout(timer);
    }
    // 是否立即执行防抖
    if (immediate) {
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (callNow) {
        method.apply(context, args);
      }
    } else {
      timer = setTimeout(() => {
        method.apply(context, args);
      }, delay);
    }
  }
  return debounced;
};

export default debounce;

 

节流：节流就是在一段时间内只触发一次事件，后发生的在时间间隔内不会被触发

 

  function throttle(func, delay) {
    let prev = Date.now()
    return function() {
      const context = this
      const args = arguments
      const now = Date.now()
      if (now - prev >= delay) {
        func.apply(context, args)
        prev = Date.now()
      }
    }
  }

都是借助闭包的特性来缓存变量

 

防抖就是当用户不再抖动后再延时触发事件

节流就是在一段时间内只执行一次操作

具体使用看情境需要