从含义到代码手写实现：防抖和节流的魅力之旅

前端

2023-11-30 19:34:43

函数防抖与节流：剖析艺术与科学的融合

在开发应用程序时，我们经常会遇到高频率执行的事件。例如，当用户输入时，我们可以实时显示搜索结果；当用户滚动页面时，我们可以动态加载更多内容。然而，如果这些事件的执行过于频繁，可能会导致性能问题。

函数防抖和函数节流是优化高频率执行Javascript代码的两种常见技术。两者都旨在减少函数调用的次数，从而提高应用程序的性能。

防抖：扼制躁动，优雅展现

防抖的本质在于延迟函数的执行。当一个事件被触发时，防抖函数不会立即执行，而是等待一段时间。如果在这段时间内事件再次触发，则会重新计算等待时间。只有当事件在指定的时间段内没有再次触发时，防抖函数才会执行。

防抖特别适用于那些需要一定时间才能完成的用户输入事件，例如搜索框的输入、文本编辑器中的输入等。通过防抖，我们可以避免在用户输入过程中频繁触发搜索或保存等操作，从而提高用户体验并减少服务器负载。

节流：从容应对，有序执行

节流与防抖不同，它不会延迟函数的执行，而是控制函数的执行频率。当一个事件被触发时，节流函数会立即执行一次。如果在接下来的指定时间段内事件再次触发，则节流函数不会执行。只有当超过指定的时间段后，节流函数才会再次执行。

节流特别适用于那些需要在一定时间间隔内执行的任务，例如页面滚动、窗口大小改变等。通过节流，我们可以确保这些任务不会过于频繁地执行，从而避免性能问题。

应用场景：防抖与节流的舞台

防抖和节流虽然有着不同的机制，但它们在许多场景下都可以发挥作用。下面列举一些常见的应用场景：

搜索框输入：当用户在搜索框中输入时，我们可以使用防抖来延迟搜索操作的执行，从而减少服务器负载并提高用户体验。
文本编辑器输入：当用户在文本编辑器中输入时，我们可以使用防抖来延迟保存操作的执行，从而避免频繁保存导致的性能问题。
页面滚动：当用户滚动页面时，我们可以使用节流来控制加载更多内容的操作的执行频率，从而避免过度加载导致的性能问题。
窗口大小改变：当窗口大小改变时，我们可以使用节流来控制重新布局操作的执行频率，从而避免频繁重新布局导致的性能问题。

代码手写实现：艺术与逻辑的碰撞

防抖和节流的原理并不复杂，我们可以通过手写Javascript代码来实现它们。下面提供防抖和节流的代码手写实现示例：

// 防抖函数
function debounce(fn, delay) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

// 节流函数
function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    let context = this;
    let args = arguments;
    let now = new Date().getTime();
    if (now - lastTime < delay) {
      return;
    }
    lastTime = now;
    fn.apply(context, args);
  };
}