类型脚本跳动

导言

TypeScript Debounce是一种优雅而强力的去弹出功能,它为您的TypeScript应用程序带来了受控函数执行的力量. 它为管理函数调用率,防止资源过度使用,以及改进应用性能提供了清洁,型式安全的API.

为什么又一个跳动图书馆?

虽然有许多解禁执行,但该图书馆以提供:

• 完整类型脚本支持: 从地上用 TypeScript 建造, 提供完整的类型安全和出色的 IDE 集成
• 基于承诺的API: 现代同步/等待支持,并进行适当的错误处理
• 配置执行: 控制先行和后行边执行
• 资源管理: 内置清理和取消支持
• 除错支持:全面伐木以排除发展出问题
• 最大等待时间: 保证长期休眠期的执行
• 无依赖:轻而自足

当你需要的时候

在许多共同的发展设想中,排除影响至关重要:

1. 搜索输入处理

   // Without debounce - Makes API call on every keystroke
   searchInput.addEventListener('input', async (e) => {
       const results = await searchAPI(e.target.value); // 🔴 Excessive API calls
   });
   
   // With debounce - Waits for user to stop typing
   const debouncedSearch = debounce(async (value: string) => {
       const results = await searchAPI(value);
   }, { wait: 300 }); // ✅ Single API call after typing stops
   

2. 窗口调整处理大小

   // Without debounce - Recalculates layout on every resize event
   window.addEventListener('resize', () => {
       recalculateLayout(); // 🔴 Performance bottleneck
   });
   
   // With debounce - Controlled recalculation
   const debouncedResize = debounce(() => {
       recalculateLayout();
   }, { wait: 150 }); // ✅ Smooth performance
   

3. 表格验证

   // Without debounce - Validates on every change
   input.addEventListener('input', async (e) => {
       await validateField(e.target.value); // 🔴 Excessive validation
   });
   
   // With debounce - Validates after user stops typing
   const debouncedValidate = debounce(async (value: string) => {
       await validateField(value);
   }, { wait: 400 }); // ✅ Efficient validation
   

4. 实时保存

   // Without debounce - Saves on every change
   editor.on('change', async (content) => {
       await saveContent(content); // 🔴 Too many save operations
   });
   
   // With debounce - Intelligently batches saves
   const debouncedSave = debounce(async (content: string) => {
       await saveContent(content);
   }, { wait: 1000 }); // ✅ Optimized saving
   

* 安装

npm install typescript-debounce
# or
yarn add typescript-debounce
# or
pnpm add typescript-debounce

QQ 快速启动

import { debounce } from '@avatijs/debounce';

// Create a debounced function
const debouncedFn = debounce(async (value: string) => {
    const result = await api.search(value);
    updateUI(result);
}, {
    wait: 300,                // Wait 300ms after last call
    leading: false,           // Don't execute on leading edge
    trailing: true,           // Execute on trailing edge
    maxWait: 1000,           // Maximum time to wait
    debug: true,             // Enable debug logging
    onError: console.error    // Error handling
});

// Use the debounced function
try {
    await debouncedFn('search term');
} catch (error) {
    handleError(error);
}

特征

• 类型安全: 完整的类型脚本支持,并带有智能类型推论
• 承诺支持: 模拟函数的内置处理
• 取消: 支持中止控制器和手动取消
• 最大等待数: 配置强制执行前的最大延迟
• 边缘控制: 配置前导和/或后导边缘上的执行
• 调试模式章 次 页 次
• 处理错误: 处理自定义调用错误
• 资源管理: 资源自动清理
• 内存效率: 适当清理和内存管理

演示

检查 演示 在操作中看到 TypeScript Debounce .

更改日志

请看 变化 以了解最近的变化.

捐款

我欢迎所有经验水平的开发者的贡献。 如果你有一个想法,找到一个虫子, 或者想改进的东西, 我鼓励你参与!

如何贡献

1. 读取 贡献指南 关于如何开始的细节.
2. 叉出存储器并做您的修改.
3. 尽快审查.

许可证

Avati是开源的,在 MIT 许可证。 。 。 .