节流与防抖

这是一个可以节流防抖的函数,设计初衷,有一些用户不了解我们的代码,也不了解频繁的点击会造成服务器资源的浪费,总是点击多次,导致多次请求,造成了资源浪费,所以需要进行节流防抖,用来限制用户的点击时间间隔

节流函数 [throttle]

功能描述

确保函数在指定时间内只执行一次，适用于高频触发但需要限制执行频率的场景（如滚动事件、窗口调整等）。

参数

参数名	类型	描述
fn	T	要节流的函数
wait	number (毫秒)	两次执行之间的最小时间间隔

返回值

节流函数，返回一个包装后的函数，该函数会在指定时间间隔内执行原始函数。

使用示例

import { throttle } from '@utils/throttleDebounce';

// 创建节流函数（500ms内最多执行一次）
const throttledScrollHandler = throttle(() => {
  console.log('处理滚动事件');
}, 500);

// 在滚动事件中使用
window.addEventListener('scroll', throttledScrollHandler);

防抖函数 [debounce]

功能描述

确保在一系列连续调用中，只有最后一次调用会执行目标函数，适用于需要等待操作停止后再执行的场景（如搜索输入、表单验证等）。

参数

参数名	类型	描述
fn	T	要防抖的函数
wait	number (毫秒)	等待停止触发的时间间隔

返回值

返回一个新的防抖函数，调用该函数会按防抖规则执行原函数。

使用示例

import { debounce } from '@utils/throttleDebounce';

// 创建防抖函数（停止输入300ms后执行）
const debouncedSearch = debounce((query: string) => {
  console.log(`搜索: ${query}`);
}, 300);

// 在输入框中使用
searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

使用场景对比

场景	推荐使用	原因
窗口调整(resize)	throttle	需要定期响应尺寸变化
滚动事件(scroll)	throttle	避免滚动时过于频繁的执行
搜索框输入(input)	debounce	等待用户停止输入后再搜索
按钮重复点击	throttle	防止用户快速多次点击
表单实时验证	debounce	用户停止输入后进行验证