【JS基础知识2】你是不是也傻傻分不清节流和防抖

大家好，我是小梅

作为在前端领域不断探索的一员，最近处于待业状态。现在开始在此记录准备面试的基础知识点。如果你也遇到了相同的问题，希望本文对你有帮助。

---

节流和防抖的实现，相信大家基本上都是直接使用lodash库提供的方法防抖和节流方法。但是面试的过程中总是容易被问到，本人对于这种定义相似的概念经常记不住，因此写下文章来加深印象。

节流：throttle。

想象成节约，既然要节约，怎么做到节约呢。那就是：频繁触发的事件，单位时间内只执行一次。用王者荣耀放技能来举例。由于大招的CD时间很长，所以放过一次要等很久，才能等到大招刷新（因此都是节约着使用大招，不轻易放）。这就是节流，单位时间内只能执行一次，只有冷静期过了，才能执行下一次。

应用场景：为啥要节流呢，那就是因为不想被频繁触发事件。因此可以用在resize事件、鼠标滑动。下拉加载（一直刷新但我不会一直发请求，节约资源嘛）等场景。

代码如下：

function throttle(fn, delay = 1000) {
  let timer = null;
  return function (...args) {
    if (timer !== null) {
      return
    }
    timer = setTimeout(() => {
      fn(args)
      timer = null;
    }, delay);
  }
}

// 时间间隔判断
function throttled1(fn, delay = 500) {
    let oldtime = Date.now();
    let calledOnce = false; // 标记函数是否已经被调用过
    
    return function (...args) {
        let newtime = Date.now();
        if (!calledOnce || newtime - oldtime >= delay) {
            fn(args);
            oldtime = newtime;
            calledOnce = true; // 标记函数已经被调用过
        }
    };
}

防抖：debounce

记住了节流，那么防抖的功能就是：连续触发的时间在单位时间内只执行最后一次。想象成王者荣耀中的回城，点击回城需要加载几秒钟才能完成回城的动作，如果这中间被打断了，那么就失效了，只能重新计时。只有在一定时间内没有被打断施法才能成功回城。

应用场景：搜索框搜索输入、文本编辑器实时保存。

代码如下：

function debounce(fn, delay = 500) {
  let timer = null;
  return function (...args) {
    if (timer !== null) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  };
}