1. perfect-debounce
[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![Github Actions][github-actions-src]][github-actions-href] [![Codecov][codecov-src]][codecov-href]
perfect-debounce
Package: perfect-debounce
Created by: unjs
Last modified: Wed, 03 May 2023 23:17:12 GMT
Version: 1.0.0
License: MIT
Downloads: 2,736,416
Repository: https://github.com/unjs/perfect-debounce

Install

npm install perfect-debounce
yarn add perfect-debounce

perfect-debounce

npm version
npm downloads
Github Actions
Codecov

An improved debounce function with Promise support.

  • Well tested debounce implementation
  • Native Promise support
  • Avoid duplicate calls while promise is being resolved
  • Configurable trailing and leading behavior

Usage

Install package:

 # npm
npm install perfect-debounce

# yarn
yarn add perfect-debounce

# pnpm
pnpm add perfect-debounce

Import:

 // ESM
import { debounce } from 'perfect-debounce'

// CommonJS
const { debounce } = require('perfect-debounce')

Debounce function:

 const debounced = debounce(async () => {
  // Some heavy stuff
}, 25)

When calling debounced, it will wait at least for 25ms as configured before actually calling our function. This helps to avoid multiple calls.

To avoid initial wait, we can set leading: true option. It will cause function to be immediately called if there is no other call:

 const debounced = debounce(async () => {
  // Some heavy stuff
}, 25, { leading: true })

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:

 const debounced = debounce(async () => {
  // Some heavy stuff
}, 25, { trailing: false })

💻 Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
  • Install dependencies using pnpm install
  • Run interactive tests using pnpm dev

License

Made with 💛

Based on sindresorhus/p-debounce.

Published under MIT License.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin