# @avatijs/debounce 中文文档 规范地址：https://npmcn.com/package/%40avatijs/debounce/ 版本：0\.1\.3 npm 元数据更新时间：2024-11-23T17:24:12.144Z 中文译文更新时间：2026-11-07T07:45:09.350Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40avatijs/debounce 原文对照：https://npmcn.com/package/%40avatijs/debounce/?lang=original 项目主页：https://avati.io/ 源码仓库：https://github.com/KhaledSMQ/avati ## 关键信息（来自 npm 元数据） - 包体积（解压后）：208 kB，19 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=18\.20\.5 - 运行依赖：0 个 - 首次发布：2024-11-20T21:28:03.049Z - 最新版本发布：2024-11-23T17:24:11.956Z - 近 30 天下载量：2009（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：3（近 12 个月 0 个） ## 中文简介 Avati 工程的开发软件包部分 ## 安装 ```sh npm install @avatijs/debounce ``` 也可以使用：`pnpm add @avatijs/debounce`、`yarn add @avatijs/debounce`、`bun add @avatijs/debounce` ## README # 类型脚本跳动 [![npm version](https://badge.fury.io/js/@avatijs%2Fdebounce.svg)](https://badge.fury.io/js/@avatijs%2Fdebounce) [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/) [![License](https://img.shields.io/npm/l/@avatijs%2Fdebounce.svg)](https://github.com/KhaledSMQ/avati/blob/master/LICENSE) ## 导言 TypeScript Debounce是一种优雅而强力的去弹出功能,它为您的TypeScript应用程序带来了受控函数执行的力量. 它为管理函数调用率,防止资源过度使用,以及改进应用性能提供了清洁,型式安全的API. ### 为什么又一个跳动图书馆? 虽然有许多解禁执行,但该图书馆以提供: - **完整类型脚本支持**: 从地上用 TypeScript 建造, 提供完整的类型安全和出色的 IDE 集成 - **基于承诺的API**: 现代同步/等待支持,并进行适当的错误处理 - **配置执行**: 控制先行和后行边执行 - **资源管理**: 内置清理和取消支持 - **除错支持**:全面伐木以排除发展出问题 - **最大等待时间**: 保证长期休眠期的执行 - **无依赖**:轻而自足 ## 当你需要的时候 在许多共同的发展设想中,排除影响至关重要: 1. **搜索输入处理** ```typescript // 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. **窗口调整处理大小** ```typescript // 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. **表格验证** ```typescript // 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. **实时保存** ```typescript // 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 ``` ## \* 安装 ```bash npm install typescript-debounce # or yarn add typescript-debounce # or pnpm add typescript-debounce ``` ## QQ 快速启动 ```typescript 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); } ``` ## 特征 - **类型安全**: 完整的类型脚本支持,并带有智能类型推论 - **承诺支持**: 模拟函数的内置处理 - **取消**: 支持中止控制器和手动取消 - **最大等待数**: 配置强制执行前的最大延迟 - **边缘控制**: 配置前导和/或后导边缘上的执行 - **调试模式**章 次 页 次 - **处理错误**: 处理自定义调用错误 - **资源管理**: 资源自动清理 - **内存效率**: 适当清理和内存管理 ## 演示 检查 [演示](https://codepen.io/khaledsmq/pen/wvVVYYe) 在操作中看到 TypeScript Debounce . ## 更改日志 请看 [变化](https://npmcn.com/package/%40avatijs/debounce/CHANGELOG.md) 以了解最近的变化. ## 捐款 我欢迎所有经验水平的开发者的贡献。 如果你有一个想法,找到一个虫子, 或者想改进的东西, 我鼓励你参与! ### 如何贡献 1. 读取 [贡献指南](https://github.com/KhaledSMQ/avati/blob/master/Contributing.md) 关于如何开始的细节. 2. 叉出存储器并做您的修改. 3. 尽快审查. ## 许可证 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/KhaledSMQ/avati/blob/master/LICENSE) Avati是开源的,在 [MIT 许可证](https://github.com/KhaledSMQ/avati/blob/master/LICENSE)。 。 。 . * * * [![Follow on Twitter](https://img.shields.io/twitter/follow/KhaledSMQ.svg?style=social)](https://x.com/khaledsmq_) [![Follow on LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue.svg)](https://www.linkedin.com/in/khaledsmq/) [![Follow on Medium](https://img.shields.io/badge/Medium-Follow-black.svg)](https://medium.com/@khaled.smq) [![Made with ❤️](https://img.shields.io/badge/Made%20with-%E2%9D%A4%EF%B8%8F-red.svg)](https://github.com/KhaledSMQ) [![Star on GitHub](https://img.shields.io/github/stars/KhaledSMQ/avati.svg?style=social)](https://github.com/KhaledSMQ/avati/stargazers) [![Follow on GitHub](https://img.shields.io/github/followers/KhaledSMQ.svg?style=social&label=Follow)](https://github.com/KhaledSMQ) ## 常见问题 ### @avatijs/debounce 是什么？ Avati 工程的开发软件包部分 ### 如何安装 @avatijs/debounce？ 在项目目录运行 npm install @avatijs/debounce，或使用 pnpm add / yarn add / bun add。 ### @avatijs/debounce 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @avatijs/debounce 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @avatijs/debounce 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=18\.20\.5。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @avatijs/debounce 可以商用吗？ @avatijs/debounce 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @avatijs/debounce 的下载量有多少？ 根据 npm 官方下载统计，@avatijs/debounce 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,009 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @avatijs/debounce 还在维护吗？ 最新版本 0\.1\.3 发布于 2024/11/24（2 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/11/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。