1. p-debounce
Debounce promise-returning & async functions
p-debounce
Package: p-debounce
Created by: sindresorhus
Last modified: Thu, 23 Jun 2022 05:43:48 GMT
Version: 4.0.0
License: MIT
Downloads: 356,002
Repository: https://github.com/sindresorhus/p-debounce

Install

npm install p-debounce
yarn add p-debounce

p-debounce

Debounce promise-returning & async functions

Install

$ npm install p-debounce

Usage

 import pDebounce from 'p-debounce';

const expensiveCall = async input => input;

const debouncedFn = pDebounce(expensiveCall, 200);

for (const number of [1, 2, 3]) {
	console.log(await debouncedFn(number));
}
//=> 3
//=> 3
//=> 3

API

pDebounce(fn, wait, options?)

Returns a function that delays calling fn until after wait milliseconds have elapsed since the last time it was called.

fn

Type: Function

Promise-returning/async function to debounce.

wait

Type: number

Milliseconds to wait before calling fn.

options

Type: object

before

Type: boolean
Default: false

Call the fn on the leading edge of the timeout. Meaning immediately, instead of waiting for wait milliseconds.

pDebounce.promise(function_)

Execute function_ unless a previous call is still pending, in which case, return the pending promise. Useful, for example, to avoid processing extra button clicks if the previous one is not complete.

function_

Type: Function

Promise-returning/async function to debounce.

 import {setTimeout as delay} from 'timers/promises';
import pDebounce from 'p-debounce';

const expensiveCall = async value => {
	await delay(200);
	return value;
}

const debouncedFn = pDebounce.promise(expensiveCall);

for (const number of [1, 2, 3]) {
	console.log(await debouncedFn(number));
}
//=> 1
//=> 2
//=> 3
  • p-throttle - Throttle promise-returning & async functions
  • p-limit - Run multiple promise-returning & async functions with limited concurrency
  • p-memoize - Memoize promise-returning & async functions
  • debounce-fn - Debounce a function
  • More…

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