函数节流是指一定时间内 js 方法只跑一次

// 函数节流
var canRun = true;
document.getElementById('throttle').onscroll = function () {
  if (!canRun) {
    // 判断是否已空闲，如果在执行中，则直接return
    return;
  }
  canRun = false;
  setTimeout(function () {
    console.log('函数节流');
    canRun = true;
  }, 300);
};

• 函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。

  如果空闲，则可以正常触发方法执行。

  如果代码正在执行，则取消这次方法执行，直接 return。

  用 setTimeout 规定最小的时间间隔 300，接着再执行 setTimeout 方法体里面的内容。

• 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。

  函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

• auto 复制代码

  // 函数防抖
  var timer = false;
  document.getElementById('debounce').onscroll = function () {
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function () {
      console.log('函数防抖');
    }, 300);
  };

函数防抖的要点，也是需要一个 setTimeout 来辅助实现。延迟执行需要跑的代码。

如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始。

如果计时完毕，没有方法进来访问触发，则执行代码。