throttle-debounce 使用教程

1. 项目介绍

throttle-debounce 是一个 JavaScript 库，提供了节流（throttle）和防抖（debounce）功能。节流是指在指定时间内只执行一次函数，而防抖是指当一系列调用停止后，只在最后一次调用后执行一次函数。这两个功能对于处理频繁触发的事件（如窗口大小改变、滚动事件等）非常有用，可以帮助减少不必要的计算和DOM操作，提高页面性能。

2. 项目快速启动

首先，您需要使用 npm 来安装 throttle-debounce：

npm install throttle-debounce --save

使用节流（throttle）

以下是一个使用节流功能的示例：

import { throttle } from 'throttle-debounce';

const throttleFunc = throttle(1000, (num) => {
  console.log('num:', num);
});

throttleFunc(1);
throttleFunc(2);
throttleFunc(3);
// 1秒后执行，输出: num: 1
// 接下来的调用在1秒内不会执行

使用防抖（debounce）

以下是一个使用防抖功能的示例：

import { debounce } from 'throttle-debounce';

const debounceFunc = debounce(1000, (num) => {
  console.log('num:', num);
});

debounceFunc(1);
debounceFunc(2);
debounceFunc(3);
// 1秒后执行，输出: num: 3
// 如果1秒内再次调用debounceFunc，则会重新计时

3. 应用案例和最佳实践

滚动事件处理

在处理滚动事件时，使用节流可以避免在滚动过程中执行过多的计算：

const handleScroll = throttle(100, () => {
  // 处理滚动事件
});

window.addEventListener('scroll', handleScroll);

输入框实时搜索

在输入框实时搜索的场景中，使用防抖可以避免在用户输入过程中发送过多的请求：

const handleSearch = debounce(500, (query) => {
  // 发起搜索请求
});

inputElement.addEventListener('input', (e) => {
  handleSearch(e.target.value);
});

4. 典型生态项目

目前，throttle-debounce 已被广泛应用于各种前端项目中，例如：

• 表单提交节流
• 按钮点击防抖
• 轮询请求节流
• 搜索框输入防抖

通过合理使用这些功能，可以有效地提升用户体验和页面性能。