12 Debouncing

Notes

## Debouncing We want to trigger a function, but only once per use case. Let's say that we want to show suggestions for a search query, but only after a visitor has finished typing it. We delay the execution of function until we have received all the input. ```jsx const debounce = function (func, delay){ let debounceTimer; return function () { const context = this; const args = arguments; clearTimeout(debounceTimer); debounceTimer = setTimeout(() => func.apply(context, args), delay); } } ``` ## Throttling We don’t want an expensive function call by throttling it / rate limiting by delaying the next function call by x amount if the user keeps pressing the button. ```jsx const throttle = function (func, delay){ let flag = true; return function () { if(flag){ flag = false; const context = this; const args = arguments; func.apply(context, args) setTimeout(() => flag = true, delay); } } } ``` ## **Transpilers** A transpiler is a special piece of software that translates source code to another source code. It can parse (“read and understand”) modern code and rewrite it using older syntax constructs so that it’ll also work in outdated engines. Babe...