性能优化之函数节流和防抖

什么是函数节流？什么是函数防抖？

1、函数节流：一个函数执行一行后，只有大于设定的执行周期后才会被执行第二次

--- --  有个需要频繁触发的函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效后面不生效

/**
 *
 * @param {*} fn 被节流的函数
 * @param {*} delay  规定的时间
 */
function throttle(fn, delay) {
  // 记录上一次函数触发的时间
  var lastTime = 0;
  return () => {
    // 记录会话当前函数触发的时间
    var nowTime = Date.now();
    // 当前时间-下一次触发时间> 传入的时间
    if (nowTime - lastTime > delay) {
      // this指向的问题
      fn.call(this);
      // 同步时间
      lastTime = nowTime;
    }
  };
}

2、防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面不生效

/**
 *
 * @param {*} fn
 * @param {*} delay
 */

export function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  return () => {
    // 清除上一次延时器
    clearTimeout(timer);
    // 重新设置新的延时器
    timer = setTimeout(() => {
      // 解决this指向问题
      fn.apply(this);
    }, delay);
  };
}