npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ts-debounce

v4.0.0

Published

TypeScript implementation of debounce

Downloads

598,597

Readme

TypeScript implementation of debounce function

Build Status npm npm bundle size (minified + gzip) npm type definitions

All Contributors

Debounce creates a new function g, which when called will delay the invocation of the original function f until n milliseconds, BUT drop previous pending delayed emissions if a new invocation is made before n milliseconds.

It's very useful for scenarios when it's better to limit the number of times the function is called. E.g. think of search input which fetches data from API. It's enough display search results after user has stopped entering characters for some time.

Install

You can install this package using npm using the command below

npm install ts-debounce

If you prefer yarn, install using the command below

yarn add ts-debounce

Function arguments

import { debounce } from "ts-debounce";

const debouncedFunction = debounce(originalFunction, waitMilliseconds, options);
  • originalFunction
    • the function which we want to debounce
  • waitMilliseconds
    • how many seconds must pass after most recent function call, for the original function to be called
  • options
    • isImmediate (boolean)
      • if set to true then originalFunction will be called immediately, but on subsequent calls of the debounced function original function won't be called, unless waitMilliseconds passed after last call
    • maxWait (number)
      • if defined it will call the originalFunction after maxWait time has passed, even if the debounced function is called in the meantime
        • e.g. if wait is set to 100 and maxWait to 200, then if the debounced function is called every 50ms, then the original function will be called after 200ms anyway
    • callback (function)
      • it is called when originalFunction is debounced and receives as first parameter returned data from originalFunction

Cancellation

The returned debounced function can be cancelled by calling cancel() on it.

const debouncedFunction = debounce(originalFunction, waitMilliseconds, options);

debouncedFunction.cancel();

Promises

Since v3 ts-debounce has Promise support. Everytime you call debounced function a promise is returned which will be resolved when the original function will be finally called. This promise will be rejected, if the debounced function will be cancelled.

You can also debounce a function f which returns a promise. The returned promise(s) will resolve (unless cancelled) with the return value of the original function.

const asyncFunction = async () => "value";
const g = debounce(asyncFunction);
const returnValue = await g();
returnValue === "value"; // true

Credits & inspiration

This implementation is based upon following sources:

Compability

  • version 3 - Promise must be available in the global namespace
  • version 2 - TypeScript 3.3
  • version 1 - TypeScript 2.0

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!