vue.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. // @ts-nocheck
  2. type Timeout = ReturnType<typeof setTimeout> | null;
  3. /**
  4. * 防抖函数,通过延迟一定时间来限制函数的执行频率。
  5. * @param fn 要防抖的函数。
  6. * @param wait 触发防抖的等待时间,单位为毫秒。
  7. * @returns 防抖函数。
  8. */
  9. export function debounce<A extends any, R>(
  10. fn : (...args : A) => R,
  11. wait : number = 300) : (...args : A) => void {
  12. let timer : Timeout = null;
  13. return function (...args : A) {
  14. if (timer) clearTimeout(timer); // 如果上一个 setTimeout 存在,则清除它
  15. // 设置一个新的 setTimeout,在指定的等待时间后调用防抖函数
  16. timer = setTimeout(() => {
  17. fn.apply(this, args); // 使用提供的参数调用原始函数
  18. }, wait);
  19. };
  20. };
  21. // 示例
  22. // 定义一个函数
  23. // function saveData(data: string) {
  24. // // 模拟保存数据的操作
  25. // console.log(`Saving data: ${data}`);
  26. // }
  27. // // 创建一个防抖函数,延迟 500 毫秒后调用 saveData 函数
  28. // const debouncedSaveData = debounce(saveData, 500);
  29. // // 连续调用防抖函数
  30. // debouncedSaveData('Data 1'); // 不会立即调用 saveData 函数
  31. // debouncedSaveData('Data 2'); // 不会立即调用 saveData 函数
  32. // 在 500 毫秒后,只会调用一次 saveData 函数,输出结果为 "Saving data: Data 2"