前端防抖和节流

防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况。

防抖
防抖，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数。

function debounce(fn) {
  // 维护一个 timer
  let timer = null;
  return function () {
    // 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, 1000);
  };
}

节流

节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

function throttle(fn) {
  var p = Date.now();
  return function () {
    let context = this;
    let args = arguments;
    let n = Date.now();
    if (n - p >= 2000) {
      fn.apply(context, args);
      p = Date.now();
    }
  };
}