exec-latest
A super-light package (510 bytes gzipped) which executes only the latest call received in a specified time (default 500 milliseconds) allowing you to debounce any fast-changing value. If another call is received using the same callback function from the same place before the specified time finish, it will ignore the first execution and restart the timeout.
What for?
-
It can be used in onChange handlers (form inputs) that have a high processing cost. execLatest will wait for the user to finish typing before executing the handler/callback function.
-
Ignore any unnecessary fast-changing function calls.
-
Call expensive operations asynchronously without reducing the user experience by lagging everything.
-
And many other real applications!
Installation
yarn add exec-latest
Dist target
- The 1.6.0 version was released in ES5 for compatibility (previous versions were targeted to ESNext).
- 2.0.0 version is targeting ES6.
Examples
Simple:
Forms in React:
import React useState useEffect from 'react'import execLatest from 'exec-latest' { const name setName = const expensiveOnChangeHandler = // Do an expensive operation with name (like filtering a big table list and re-render it). // This will not reduce user typing experience. console return <div> <input ="text" ="name" = = /> </div> }
More elaborated example using timeoutLoop for test the function:
async { let loopCounter = 0 let execCounter = 0 const execTrace = const loopsToMake = 3 await { } console}