JavaScript防抖与节流函数：优化高频触发事件

前端

2023-09-16 06:03:24

在现代网络应用程序中，用户经常会与触发高频事件的交互式元素进行交互，例如搜索框中的输入、鼠标移动或点击事件。虽然这些事件对于提供响应式和交互式用户体验至关重要，但如果处理不当，它们也可能导致性能问题和不必要的资源消耗。

在这里，JavaScript中的防抖和节流函数发挥了至关重要的作用。这些函数提供了一种优雅的方法，可以优化高频触发事件的执行，提高应用程序的性能和用户体验。

防抖

防抖函数通过在指定的时间间隔内只执行一次给定的函数来防止函数被多次调用。当事件触发时，防抖函数会启动一个计时器。如果在计时器超时之前再次触发事件，计时器将被重置。只有当计时器完成其倒计时时，函数才会被调用。

这对于避免在快速连续的事件触发中多次执行耗时的操作很有用。例如，在搜索框中输入时，我们可以使用防抖函数来限制联想查询的次数，避免在用户尚未完成输入之前发出不必要的网络请求。

节流

节流函数与防抖函数类似，但其着眼于在特定时间间隔内只调用给定的函数一次，无论触发事件的频率如何。当事件触发时，节流函数会检查自上一次函数调用以来是否已经经过指定的时间间隔。如果时间间隔已经过去，函数就会被调用。否则，函数调用将被丢弃。

这对于限制对频繁执行的函数的调用次数非常有用。例如，在处理鼠标移动事件时，我们可以使用节流函数来限制函数每秒调用的次数，防止因过多的事件触发而导致应用程序过载。

实施

在JavaScript中，我们可以使用以下代码轻松实现防抖和节流函数：

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function() {
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 节流函数
function throttle(func, wait) {
  let lastCall = 0;
  return function() {
    const args = arguments;
    const now = new Date().getTime();
    if (now - lastCall >= wait) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}