提交学习笔记专用
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
3.3 KiB

  1. # perfect-debounce
  2. <!-- automd:badges color=yellow codecov bundlephobia packagephobia -->
  3. [![npm version](https://img.shields.io/npm/v/perfect-debounce?color=yellow)](https://npmjs.com/package/perfect-debounce)
  4. [![npm downloads](https://img.shields.io/npm/dm/perfect-debounce?color=yellow)](https://npm.chart.dev/perfect-debounce)
  5. [![bundle size](https://img.shields.io/bundlephobia/minzip/perfect-debounce?color=yellow)](https://bundlephobia.com/package/perfect-debounce)
  6. [![install size](https://badgen.net/packagephobia/install/perfect-debounce?color=yellow)](https://packagephobia.com/result?p=perfect-debounce)
  7. [![codecov](https://img.shields.io/codecov/c/gh/unjs/perfect-debounce?color=yellow)](https://codecov.io/gh/unjs/perfect-debounce)
  8. <!-- /automd -->
  9. Improved debounce function with Promise support.
  10. ## Features
  11. - Well tested debounce implementation
  12. - Native Promise support
  13. - Avoid duplicate calls while promise is being resolved
  14. - Configurable `trailing` and `leading` behavior
  15. - Control methods
  16. ## Usage
  17. Install package:
  18. ```sh
  19. npx nypm i perfect-debounce
  20. ```
  21. Import:
  22. ```js
  23. import { debounce } from "perfect-debounce";
  24. ```
  25. Debounce function:
  26. ```js
  27. const debounced = debounce(async () => {
  28. // Some heavy stuff
  29. }, 25);
  30. ```
  31. When calling `debounced`, it will wait at least for `25ms` as configured before actually calling your function. This helps to avoid multiple calls.
  32. ### Control Methods
  33. The returned debounced function provides additional control methods:
  34. - `debounced.cancel()`: Cancel any pending invocation that has not yet occurred.
  35. - `await debounced.flush()`: Immediately invoke the pending function call (if any) and return its result.
  36. - `debounced.isPending()`: Returns `true` if there is a pending invocation waiting to be called, otherwise `false`.
  37. ```js
  38. debounced.cancel(); // Cancel any pending call
  39. await debounced.flush(); // Immediately invoke pending call (if any)
  40. debounced.isPending(); // Returns true if a call is pending
  41. ```
  42. ### Example
  43. ```js
  44. const debounced = debounce(async (value) => {
  45. // Some async work
  46. return value * 2;
  47. }, 100);
  48. debounced(1);
  49. debounced(2);
  50. debounced(3);
  51. // Check if a call is pending
  52. console.log(debounced.isPending()); // true
  53. // Immediately invoke the pending call
  54. const result = await debounced.flush();
  55. console.log(result); // 6
  56. // Cancel any further pending calls
  57. debounced.cancel();
  58. ```
  59. To avoid initial wait, we can set `leading: true` option. It will cause function to be immediately called if there is no other call:
  60. ```js
  61. const debounced = debounce(
  62. async () => {
  63. // Some heavy stuff
  64. },
  65. 25,
  66. { leading: true },
  67. );
  68. ```
  69. If executing async function takes longer than debounce value, duplicate calls will be still prevented a last call will happen. To disable this behavior, we can set `trailing: false` option:
  70. ```js
  71. const debounced = debounce(
  72. async () => {
  73. // Some heavy stuff
  74. },
  75. 25,
  76. { trailing: false },
  77. );
  78. ```
  79. ## 💻 Development
  80. - Clone this repository
  81. - Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10)
  82. - Install dependencies using `pnpm install`
  83. - Run interactive tests using `pnpm dev`
  84. ## License
  85. Based on [sindresorhus/p-debounce](https://github.com/sindresorhus/p-debounce).
  86. Made with 💛 Published under [MIT License](./LICENSE).