javascript函数的节流[throttle]与防抖[debounce]

JavaScript函数的节流与防抖

在javascript开发中，有时候我们需要在频繁触发某些事件时，进行性能优化，防止事件处理函数被频繁调用而导致页面出现性能问题，这时，javascript的节流和防抖技术就能派上用场了。

什么是节流

节流(throttle)是一种控制事件触发频率的技术，它会将一定时间内发生的多次事件，限制成只触发一次事件。

具体来说，throttle会设置一个时间间隔threshold，在该时间间隔内，如果事件被重复触发，throttle会忽略多余的事件触发。只有当该时间间隔threshold到达之后，才会触发一次已忽略的事件，并重置定时器。

下面是一个基于定时器实现的节流函数示例代码：

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

上述代码中的throttle函数，接受两个参数：一个是事件处理函数（fn），另一个是时间间隔（interval）。当事件被触发时，throttle将fn函数包装成一个闭包，然后利用setTimeout函数来延迟事件处理函数的执行，达到节流的目的。

什么是防抖

防抖(debounce)是一种控制事件触发频率的技术，它会将多次事件的执行合并成一次事件，并在一定时间后执行一次。

具体来说，debounce会设置一个时间间隔threshold，在该时间间隔内，如果事件被重复触发，debounce会忽略之前的事件触发，并在时间间隔到达后，才会执行一次已经合并的事件。

下面是一个基于定时器实现的防抖函数示例代码：

function debounce(fn, interval) {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, interval);
  };
}

上述代码中的debounce函数，接受两个参数：一个是事件处理函数（fn），另一个是时间间隔（interval）。当事件被触发时，debounce会清除之前的定时器，并重新设置一个新的定时器。在给定的时间间隔(interval)内，如果事件持续触发，则会重新设置定时器。当时间间隔到达后，会执行fn函数。

节流和防抖的应用场景

• 节流时间间隔太短，适用于一些比较频繁的操作，比如实时搜索
• 防抖时间间隔太短，适用于一些不太频繁的操作，比如表单验证

以下分别是一个简单的处理鼠标移动事件的节流和防抖示例：

节流示例

// 实时显示鼠标移动的坐标
const displayPositionThrottle = throttle((e) => {
  console.log(e.clientX, e.clientY);
}, 1000);

document.addEventListener('mousemove', displayPositionThrottle);

上述代码会持续监测鼠标移动事件，但只会在1秒内执行一次事件处理，避免了频繁改动DOM造成的页面性能问题。

防抖示例

// 点击按钮提交表单
const button = document.querySelector('button');
const submitFormDebounce = debounce(() => {
  console.log('提交表单');
}, 1000);

button.addEventListener('click', submitFormDebounce);

上述代码会在点击按钮时执行表单提交的操作，但如果一直频繁点击按钮，则不会一直发起表单提交操作，而是在1秒后执行一次提交表单操作，避免了因频繁点击按钮而造成的表单重复提交问题。