diff --git a/snippets/debounce.md b/snippets/debounce.md new file mode 100644 index 000000000..941ab59a3 --- /dev/null +++ b/snippets/debounce.md @@ -0,0 +1,29 @@ +### debounce + +Creates a debounced function that delays invoking the provided function until after `wait` milliseconds have elapsed since the last time the debounced function was invoked. + +Use `setTimeout()` and `clearTimeout()` to debounce the given method, `fn`. +Use `Function.apply()` to apply the `this` context to the function and provide the necessary `arguments`. +Omit the second argument, `wait`, to set the timeout at a default of 0 ms. + +```js +const debounce = (fn, wait = 0) => { + let inDebounce; + return function() { + const context = this, + args = arguments; + clearTimeout(inDebounce); + inDebounce = setTimeout(() => fn.apply(context, args), wait); + }; +}; +``` + +```js +window.addEventListener( + 'resize', + debounce(function(evt) { + console.log(window.innerWidth); + console.log(window.innerHeight); + }, 250) +); // Will log the window dimensions at most every 250ms +``` diff --git a/tag_database b/tag_database index 18fa151c3..6b4c7e9ff 100644 --- a/tag_database +++ b/tag_database @@ -33,6 +33,7 @@ createElement:browser,utility createEventHub:browser,event,advanced currentURL:browser,url curry:function,recursion +debounce:function decapitalize:string,array deepClone:object,recursion deepFlatten:array,recursion