debounce-animation-frame
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    debounce-animation-frame

    Debounce your functions using requestAnimationFrame.

    This means that your function will be called on the first available animation frame. If you use your function for updating visual information, you can use this package to debounce it - this way you won't make any unnecessary updates. If you are unfamiliar with requestAnimationFrame, I suggest you read here first.

    Usage

    This is a simple example to get you going:

    import debounceAnimationFrame from "debounce-animation-frame";
     
    const myFn = (a, b) => {
      console.log("result: ", a + b);
    };
     
    const myDebouncedFn = debounceAnimationFrame(myFn);
     
    myDebouncedFn(1, 2);

    debounceAnimationFrame takes a function as an argument, and returns another function, which returns a promise, which resolves with the result of the first function.

    When you wrap your function in debounceAnimationFrame, you can use the returned function like you would use your original function, but it will now return a promise (which you won't need in most cases). Your function will get fired on the next animation frame.

    API

    This module is written in TypeScript so the types are included. It exports only one function as a default export. It has the following signature:

    debounceAnimationFrame: <F extends (...args: any[]) => any>(fn: F) => (...args: Parameters<F>) => Promise<ReturnType<F>>

    The promise returned resolves with the result of the passed function.

    Keep in mind that in most cases, you may not need this promise, but I still added the functionality if you ever need it.

    Use cases and motivation

    The use case that made me think about the idea is in my React application, I had a onMouseMove handler which sets the state with the current mouse position. Well, it makes no sense to set the state on every mouse move if most of them won't even be seen, so debouncing it like that seemed the best option. Now, the state is updated only when the result will actually be seen.

    License

    Licensed under the MIT License.

    Install

    npm i debounce-animation-frame

    DownloadsWeekly Downloads

    96

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    5.21 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar