JavaScript：节流&防抖

---

节流

什么是节流

在JavaScript中，节流throttle是一种限制函数执行频率的技术。
当一个函数被频繁调用时，节流能够控制函数执行的次数，以避免过多的计算和资源的浪费。

比如说在游戏中，一个技能的释放是有间隔的。当我们释放了一次技能后，只有过一段时间才能再次释放这个技能。这就是一种节流。

节流的实现

接下来我们就写个函数，来实现节流。我会先为大家展示代码，然后进行解析。

实现节流的一种常见方法是使用定时器。基本的节流函数如下所示：

function throttle(func, wait) {
  let timer;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

该函数接受两个参数：待执行的函数func和等待时间wait。

待执行的函数就是我们每隔一段时间需要调用的函数，wait则是在触发一次后，在wait时间内无法再次触发这个函数。

我们首先拆解一下这个函数的大题结构：

function throttle(func, wait) {
  let timer;
  return function() {if (!timer) {...}};
}

其基本结构为：在外层函数throttle设置一个timer变量，然后在内层函数使用了timer变量，并把内层函数作为外层函数的返回值。
这个结构，就是一个标准的闭包结构！（不知道闭包的可以看这篇文章[JavaScript：作用域&变量回收]）
那么这个闭包结构有什么用呢？

其保证了 timer这个变量永远不会被销毁，我们在下一次访问这个函数的时候依然可以用上一次留下来的timer，以确定距离上一次的事件也没有到达指定时间。

再看到内层函数：

function() {
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };

timer是setTimeout的返回值，当timer为空时，就会执行if语句内部的代码：timer = setTimeout()，此时timer就立刻得到了setTimeout的返回值。
然后setTimeout内部的代码要等待 wait时间后才执行。等到 wait时间后，调用函数func，即我们想要节流的函数。随后将 timer = null;保证下一次使用这个函数可以被执行。
在这个过程中，在setTimeout被调用的瞬间，timer就立刻得到了setTimeout的返回值而不为空。这个时间内， if (!timer)就会判断为false，从而不执行内部代码。当 wait时间后，执行 timer = null;，此时if (!timer)就会判断为true，从而进入下一次节流。

---

另一种常见的实现节流的方式是使用时间戳。基本的节流函数如下所示：

function throttle(func, wait) {
  let previous = 0;
  return function() {
    let now = Date.now();
    if (now - previous > wait) {
      func.apply(this, arguments);
      previous = now;
    }
  };
}

该函数使用一个变量previous来记录上一次函数执行的时间戳。当函数被调用时，首先获取当前的时间戳，然后与上一次执行的时间戳进行比较。如果两个时间戳之间的间隔大于等待时间，则执行函数，并更新上一次执行的时间戳。否则，不执行函数。

此处也是使用了和刚才一样的闭包结构，唯一的区别就是前面使用setTimeout来控制时间，而此处利用时间戳的减法控制时间。

这两种实现节流的方式都可以达到限制函数执行频率的效果，具体选择哪种方式取决于具体的使用场景和需求。但是两者利用的重要思想都是闭包结构保留变量。

---

防抖

什么是防抖

防抖事件指的是在连续触发某个事件时，只有等到一定的时间间隔内没有再次触发，才会执行该事件。其主要目的是防止事件的频繁触发，从而减少不必要的资源消耗和提升性能。

就好比如moba游戏中的回城效果。如果你点击回城后，再次点击回城，那么先前的回城就会被阻断，重新计时。这就是节流的思想。

---

防抖的实现

防抖的实现通常是通过定时器实现的。当事件触发时，先清除之前的定时器，再重新设置一个新的定时器，在指定的时间间隔内如果没有再次触发事件，则执行该事件。如果在时间间隔内再次触发了事件，则重新设置定时器，并重置计时。

下面是一个示例，使用JavaScript实现一个简单的防抖事件：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

上述示例中，使用了debounce函数来实现防抖功能。debounce函数接受一个需要执行的事件处理函数和延迟时间作为参数，返回一个新的函数。当事件触发时，该新函数会清除之前的定时器clearTimeout(timer);，并重新设置一个新的定时器 timer = setTimeout。如果在延迟时间内再次触发了事件，会重置定时器。直到延迟时间内没有再次触发事件时，才会执行事件处理函数。

具体使用：

function handleScroll() {
  console.log('Scroll被触发了');
}

window.addEventListener('scroll', debounce(handleScroll, 200));

在上述示例中，我们在window对象上监听了scroll事件，并使用防抖函数将事件处理函数包裹起来。延迟时间设置为200毫秒，意味着只有在200毫秒内没有再次触发scroll事件时，才会执行handleScroll函数。

同样的，防抖也利用了闭包思想。

通过使用防抖事件，可以有效地减少事件的触发次数，提升性能和用户体验。

---