函数防抖与函数节流的实现

前言

开发中不可避免会遇到需要使用防抖和节流进行功能的优化，同时也是前端开发在面试中必问的一道题。记录一下以备不时之需

防抖

防抖实际上就是在多次调用事件时，在指定时间内执行最后一次调用

/**
 * 防抖
 * @param fn
 * @param timer
 * @returns {function(...[*]=)}
 */
export const debounce = (fn, timer = 500) => {
  let timeout = null;
  return function() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        let args = arguments;
        fn.apply(this, args);
      }, timer);
    }
  };
};

使用场景：按钮点击，页面跳转等

节流

节流实际上就是在频繁调用事件时，每隔一段时间执行一次。

/**
 * 节流
 * @param fn
 * @param timer
 * @returns {function(...[*]=)}
 */
export const throttle = (fn, timer = 500) => {
  let timeout = null;
  let prev = null;
  return function() {
    if (prev) {
      return;
    }
    prev = true;
    timeout = setTimeout(() => {
      let args = arguments;
      fn.apply(this, args);
      prev = null;
      clearTimeout(timeout);
    }, timer);
  };
};

使用场景：获取列表数据