- Notifications
You must be signed in to change notification settings - Fork0
🧠 Zep is a zero-dependency, efficient debounce module. ⏰
License
igorskyflyer/npm-zep
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Your personal (de)bouncer 💪🦸♂️
🧠 Zep is a zero-dependency, efficient debounce module. ⏰
I work hard for every project, including this one and your support means a lot to me!
Consider buying me a coffee. ☕
Thank you for supporting my efforts! 🙏😊
@igorskyflyer
Note
WhyZep()? BecauseZep() allows you to create time-invoked callbacks but withdeferred execution!Zep() does debouncing in avery efficient manner by only creating 1 Timer * - provided bysetInterval. Some use cases are: when you are processing user input but want to wait until they have finished typing or you are using a 3rd-party API that calls an event handler too often - you can throttle those calls or when your event handler does intensive computing and you want to minimize workload. It limits the rate at which a function/handler can be fired/triggered, thus increasing performance/responsiveness of your product.
* other debounce functions/modules create dozens, even hundreds of Timers in order to provide the same functionality.
Install it by executing:
npm i"@igor.dvlpr/zep"typeZepCallback=(...args:any[])=>void
Used as a type for the callback provided in the constructor.
typeZepErrorHandler=(error:unknown)=>void
Used as a type for the callback used in handling errors.
typeZepEventHandler=()=>void
Used as a type forZep events.
constructor(callback:ZepCallback,time?:number):Zep
Creates a new instance of Zep.
callback- the function/callback to debounce.time- the time limit (inms) for the debouncing.
example.ts
import{Zep}from'@igor.dvlpr/zep'// pass an arrow functionconstzep:Zep=newZep((value:string)=>{// code to limit its execution rate},1500)functionmyFunction(value:string){/* some code */}// or an existing functionconstzep:Zep=newZep(myFunction,1500)// You can have as many arguments in your callback function as you want.
onCancelled(handler:ZepEventHandler):Zep
A handler to call when the execution ofZep.run() has been cancelled.
See alsoZep.cancel().
onAborted(handler:ZepEventHandler):Zep
A handler to call when the execution ofZep.run() has been aborted.
See alsoZep.abort().
onBeforeRun(handler:ZepEventHandler):Zep
A handler to call before each call to yourcallback.
onAfterRun(handler:ZepEventHandler):Zep
A handler to call after each call to yourcallback.
onCompleted(handler:ZepEventHandler):Zep
A handler to call afterZep() has finished running, i.e. no more calls to theZep.run() method have been issued in the given time-frame.
onError(handler:ZepEventHandler,error:Error):Zep
A handler to call when an error has occurred during execution.
abort():void
Aborts the execution, stops Zep completely and - if applicable - the currently running Timer without waiting for it to finish its execution. See alsoZep.cancel().
cancel():void
Stops the execution butNOT the current running Timer - if applicable. See alsoZep.abort().
run(...args):void
Runs the callback defined in the constructor if necessary or else debounces it.
writeStats():void
WritesZep() statistical information to theconsole, sample output,
[Zep]: invocations: 500, callback executions: 32, saving of 93.60% calls.
☝ Means that the event was triggered500 times butZep() debounced it and only executed its handler32 times instead, the handler was called93.60% less than without usingZep().
Properties
executionCount:numberReturns the number of callback executions.
isWaiting:booleanIndicates whetherZep() is waiting for a Timer to finish its execution, iftrue,Zep.run() won't create new Timers when called.
isRunning:booleanIndicates whether a Timer is currently running thecallback provided in the constructor.
wasCancelled:booleanIndicates whether the execution ofZep.run() was cancelled. Execution can be cancelled by callingZep.cancel().
wasAborted:booleanIndicates whether the execution ofZep.run() was aborted. Execution can be aborted by callingZep.abort().
zep.ts
import{Zep}from'@igor.dvlpr/zep'// pass an arrow functionconstzep:Zep=newZep((value:string)=>{// code to limit its execution rate},1500)// then pass Zep's run() method to the event instead the original function// codeconstpicker=vscode.window.createQuickPick()// this is by default triggered each time a user types a character inside the QuickPickpicker.onDidChangeValue((e:string)=>{zep.run(e)}// due to the nature of JavaScript the following WON'T WORK,// when you pass a class method as a parameter that// method will get detached from the class and lose its track of <this>,// which will be globalThis/undefined, thus resulting in an error,picker.onDidChangeValue(zep.run)// but you could use any of the 2 techniques// ****functionchangeHandler():void{zep.run()}// and then use that wrapper-functionpicker.onDidChangeValue(changeHandler)// ****// or// ****constchangeHandler:Function=zep.run.bind(zep)picker.onDidChangeValue(changeHandler)// ****// by using Zep we can wait for the user to finish their input// if they haven't typed a single letter = the onDidChangeValue wasn't// triggered for 1500ms (1.5s) we assume they finished typing// more code
✨ Changelog is available here:CHANGELOG.md.
Licensed under the MIT license which is available here,MIT license.
@igor.dvlpr/scrollend-polyfill
🛴 A performant and light (< 1KB) JavaScript polyfill for the scrollend Event. ⛸️
🦀 ExtendableString allows you to create strings on steroids that have custom transformations applied to them, unlike common, plain strings.. 🪀
🐌 Zing is a C# style String formatter for JavaScript that empowers Strings with positional arguments - composite formatting. 🚀
🧬 A lightweight JavaScript utility allowing deep copy-by-value of nested objects, arrays and arrays of objects. 🪁
🎍 Provides a universal way of formatting file-paths in Unix-like and Windows operating systems as an alternative to the built-in path.normalize(). 🧬
Provided byIgor Dimitrijević (@igorskyflyer).
About
🧠 Zep is a zero-dependency, efficient debounce module. ⏰
