防抖和节流的区别与实现

概念

防抖（Debounce） 和 节流（Throttle） 是两种常用的技术手段，主要用于控制某个函数在一定时间内触发的次数，以减少触发频率，提高性能并避免资源浪费。

防抖和节流的区别

防抖（Debounce） 的工作原理是，当事件持续触发时，只有在事件停止触发n秒后，才会执行事件函数。如果在n秒内事件被重新触发，那么之前的计时会被重置。这种技术通常用于如模糊搜索、短信验证和文本编辑器实时保存等场景。

节流（Throttle） 的工作原理是，当事件持续触发时，每n秒只执行一次函数。如果在n秒内事件被重复触发，那么只有第一次触发的事件会生效。这种技术常用于处理如scroll事件和window的resize等场景。

防抖函数实现

// 封装万能防抖函数
    // 第一个参数： 事件处理函数(回调函数)
    // 第二个参数:  防抖间隔
    // 返回值 : 做了防抖处理的新函数
    //  函数防抖流程 ：
      //      (1)声明全局变量存储定时器ID
      //      (2)每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中 
function debounce(func, delay) {
// (1)声明一个定时器ID
    // 这个timeID要放在 返回的那个函数外面声明。
    // 因为你一旦写到了下面function的里面去了，那么你每调用一次函数，就会重新声明一个全新的变量timeID. 如果放到外面的话,  下面这个函数全部访问的就是同一个timeID。 这样才能做到每一次清除定时器的时候，都是把之前的定时器给清除。
  let timer;
  return function () {
    const context = this;
    const args = arguments;   
    // (2)清除上一次的定时器
    clearTimeout(timer);   
    // (3)开启本次的定时器 setTimeout( 函数 , 间隔 )
    timer = setTimeout(function () {
      func.apply(context, args);
    }, delay);
  };
}

// 防抖函数调用：
input.addEventListener('input',debounce(function () {
         console.log(input.value)
 },1000))

节流函数实现

// 封装万能节流函数
    // 第一个参数： 事件处理函数(回调函数)
    // 第二个参数:  防抖间隔
    // 返回值 : 做了节流处理的新函数
     //  函数节流流程 ：
      //      (1)声明全局变量存储定时器ID
      //      (2)每一次触发事件, 先看上一次定时器是否执行完，执行完则将事件处理代码放入本次定时器中，未执行完则放弃执行本次触发事件。
function throttle(func, delay) {
  let timer;
  return function () {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}