防抖与节流都是用来防止高频率执行js代码的

防抖

防抖本质上就是以最后的操作为标准打个比方：游乐园的娱乐设施，有的是要凑够了十个人，才能启动，这最后一个人就我们参照标准，娱乐设施就比作我们js代码，最后一个人就充当我们执行的条件。代码如下：

let setTimer;
let shake = function() {
  clearTimeout(setTimer);
  setTimer = setTimeout(() => {
    console.log("我在等最后一次操作");
  }, 0);
};

let interTimer = setInterval(() => {
  shake();
}, 0);

let timer = setTimeout(() => {
  clearInterval(interTimer);
  clearTimeout(timer);
  timer = null;
  interTimer = null;
}, 2000);

执行以上代码，控制台会在 2s 后打出日志，2s 之内的操作都被清空，以最后一次的操作为准。

如果你在监听滚动事件，假设两秒以内用户在不断的平凡的触发onScroll事件，只有用户暂停滚动后，才会去执行响应的操作, 代码如下:

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

节流

定时器实现节流代码如下：

let isAllow = true;
function shake() {
  let fun = function() {
    if (!isAllow) return;
    isAllow = false;
    let timer = setTimeout(() => {
      console.log("这里是实际的业务代码");
      clearTimeout(timer);
      timer = null;
      isAllow = true;
    }, 1000);
  };
  fun();
}
let interTimer = setInterval(() => {
  shake();
}, 0);

执行以上代码你讲会看到控制台每隔 1s 后打印出结果，1s 内不会执行打印日志

js中的防抖与节流

防抖与节流都是用来防止高频率执行js代码的

防抖

节流