带你手写防抖与节流

2023-12-03 05:22:04

[JS]带你手写防抖与节流

前言

防抖和节流是前端开发中十分重要的概念。它们有助于优化网站性能，提高用户体验。尽管有许多库和框架提供了现成的防抖和节流函数，但了解如何自己实现这些函数对于前端工程师来说非常有价值。本文将一步一步指导你如何使用 JavaScript 手写防抖和节流函数。

理解防抖和节流

防抖

防抖是一种技术，它可以限制函数在指定时间间隔内只执行一次。换句话说，如果函数在指定时间间隔内被多次调用，它只会执行最后一次调用。防抖常用于处理用户输入事件，例如搜索框中的文本输入或滚动事件。

节流

节流是一种技术，它可以限制函数在指定时间间隔内只执行一次。与防抖不同，节流会在时间间隔的开始执行函数。节流常用于限制对服务器或 API 的请求速率。

手写防抖函数

实现防抖函数，需要以下步骤：

创建一个闭包函数，将原始函数包装起来。
在闭包函数中，使用 setTimeout() 来安排函数在指定时间间隔后执行。
如果在时间间隔内再次调用闭包函数，则取消前一个 setTimeout() 调度。

以下是手写防抖函数的 JavaScript 代码：

function debounce(func, delay) {
  let timer;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
      timer = null;
    }, delay);
  };
}

手写节流函数

实现节流函数，需要以下步骤：

创建一个闭包函数，将原始函数包装起来。
在闭包函数中，使用一个标志位来跟踪函数是否正在执行。
如果函数正在执行，则忽略 subsequent calls。
如果函数未执行，则使用 setTimeout() 来安排函数在指定时间间隔后执行。

以下是手写节流函数的 JavaScript 代码：

function throttle(func, delay) {
  let isThrottled = false;
  return function (...args) {
    if (isThrottled) return;
    isThrottled = true;
    setTimeout(() => {
      func(...args);
      isThrottled = false;
    }, delay);
  };
}