Matrix

Appearance

防抖函数 (debounce) ​

创建一个防抖函数,用于限制函数的执行频率。当持续触发事件时,防抖函数会在最后一次调用结束后等待指定时间后才执行。

签名 ​

typescript
function debounce<T extends (...args: any[]) => any>(
fn: T,
wait?: number,
options?: { leading?: boolean; trailing?: boolean }
): ((...args: Parameters<T>) => void) & { cancel: () => void };

参数 ​

  • fn (Function): 要防抖的函数
  • wait (number): 等待时间,单位毫秒,默认 300ms
  • options (Object): 配置选项
    • leading (boolean): 是否在延迟开始前调用,默认 false
    • trailing (boolean): 是否在延迟结束后调用,默认 true

返回值 ​

(Function): 返回新的防抖函数，该函数具有 cancel 方法用于取消延迟的函数调用

示例 ​

typescript
import { debounce } from '@fu/matrix';
// 或
const debounce = window.fuMatrix.debounce;
// 基础用法 - 延迟执行
const debouncedSearch = debounce((text) => {
console.log('搜索:', text);
}, 300);
searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});
// 立即执行 + 延迟执行
const debouncedSave = debounce(
() => console.log('保存数据'),
1000,
{ leading: true }
);
saveButton.addEventListener('click', debouncedSave);
// 取消延迟执行
const debouncedSubmit = debounce(submitForm, 500);
submitButton.addEventListener('click', debouncedSubmit);
// 用户点击取消按钮时
cancelButton.addEventListener('click', () => {
debouncedSubmit.cancel(); // 取消延迟的表单提交
});

应用场景 ​

  • 搜索框输入时等待用户输入完成后再发送请求
  • 窗口调整时限制 resize 事件处理函数的调用频率
  • 表单提交时防止重复提交
  • 按钮点击事件防抖

注意事项 ​

  • leading 和 trailing 选项不能同时为 false
  • 如果在等待时间内多次调用,只有最后一次调用的参数会被使用
  • 返回的防抖函数没有返回值
  • 如果需要取消防抖,可以在组件卸载时清除定时器