写这篇文章的原因是之前对节流和防抖的概念比较模糊，分不太清这两个的具体区别，在某视频网站看到老师的讲解之后豁然开朗，希望这篇文章能帮助到和我有同样困惑的小伙伴。

节流函数

一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。

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

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

防抖函数

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

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

浅谈节流和防抖

节流函数

防抖函数