Commit 1ff4319

author

Swastikyadav

committed

Add polyfills for debounce and throttle

1 parent 8559fdd commit 1ff4319Copy full SHA for 1ff4319

File tree

+46

-0

lines changed

+46

-0

lines changed

Lines changed: 17 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,17 @@`
	`1`	`+/*`
	`2`	`+ - Debouncing is a technique to rate limit / reduce the number of requests to the server.`
	`3`	`+ - For example, when user types in an input, instead of sending request for every character typed, we send request only when user stops typing for a time period.`
	`4`	`+ - And if user starts typing again before given time period, we cancel the ongoing request and start new request.`
	`5`	`+*/`
	`6`	`+`
	`7`	`+function debounce(callback, delay) {`
	`8`	`+ let timerID;`
	`9`	`+`
	`10`	`+ return function(...args) {`
	`11`	`+ clearTimeout(timerID);`
	`12`	`+`
	`13`	`+ timerID = setTimeout(() => {`
	`14`	`+ callback.apply(this, args);`
	`15`	`+ }, delay);`
	`16`	`+ }`
	`17`	`+}`

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,29 @@`
	`1`	`+/*`
	`2`	`+ ## Throttling`
	`3`	`+`
	`4`	`+ - Similar technique to debouncing only difference being that request is sent every given number of seconds regardless of wheater user has stopped the action or not.`
	`5`	`+ - With every request we cancel the previous request timer.`
	`6`	`+*/`
	`7`	`+`
	`8`	`+function throttle(callback, delay) {`
	`9`	`+ let timerID;`
	`10`	`+ let lastTimeCalled = 0;`
	`11`	`+`
	`12`	`+ return function throttled(...args) {`
	`13`	`+ const currentTime = Date.now();`
	`14`	`+ const timeSinceLastCalled = currentTime - lastTimeCalled;`
	`15`	`+ const delayRemaining = delay - timeSinceLastCalled;`
	`16`	`+`
	`17`	`+ if (delayRemaining <= 0) {`
	`18`	`+ lastTimeCalled = Date.now();`
	`19`	`+ callback.apply(this, args);`
	`20`	`+ } else {`
	`21`	`+ clearTimeout(timerID);`
	`22`	`+`
	`23`	`+ timerID = setTimeout(() => {`
	`24`	`+ lastTimeCalled = Date.now();`
	`25`	`+ callback.apply(this, args);`
	`26`	`+ }, delayRemaining);`
	`27`	`+ }`
	`28`	`+ }`
	`29`	`+}`

Comments

(0)