手写防抖和节流函数，一招搞定性能优化！

前端

2023-10-14 04:16:10

引言

在前端开发中，性能优化至关重要。而防抖和节流函数是两把优化利器，它们可以有效减少不必要的函数调用，从而提升页面响应速度和用户体验。虽然市面上有成熟的库可以实现这些功能，但在面试或实际项目中，手写防抖和节流函数仍然是不可或缺的能力。

本文将深入浅出地讲解防抖和节流函数的原理和应用，并提供详细的手写代码示例。

一、防抖函数

防抖函数的原理是：当一个函数被频繁调用时，只执行最后一次调用的结果，而忽略中间的所有调用。这样可以有效避免因频繁调用而造成的性能问题。

1. 原理剖析

防抖函数的实现主要依赖于两个关键步骤：

计时器： 创建一个定时器，当函数被调用时，重置该定时器。
执行判断： 如果定时器没有被重置，则执行函数。

2. 手写代码示例

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

3. 应用场景

防抖函数常用于以下场景：

输入框搜索，避免频繁触发搜索请求
滚动事件，避免频繁触发页面加载
窗口大小改变事件，避免频繁调整页面布局

二、节流函数

节流函数与防抖函数类似，但其原理是：在指定的时间间隔内，只执行一次函数调用，而忽略其他调用。这样可以控制函数调用的频率，防止因过于频繁的调用而造成性能问题。

1. 原理剖析

节流函数的实现也依赖于两个关键步骤：

计时器： 创建一个计时器，控制函数调用的频率。
执行判断： 如果计时器已就绪，则执行函数，否则忽略调用。

2. 手写代码示例

function throttle(fn, delay) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last > delay) {
      fn.apply(this, args);
      last = now;
    }
  };
}

3. 应用场景

节流函数常用于以下场景：