diff --git a/README.md b/README.md index cdfe87fdd..13648d57b 100644 --- a/README.md +++ b/README.md @@ -229,6 +229,7 @@ average(1, 2, 3); * [`compose`](#compose) * [`composeRight`](#composeright) * [`curry`](#curry) +* [`debounce`](#debounce) * [`defer`](#defer) * [`delay`](#delay) * [`functionName`](#functionname) @@ -3738,6 +3739,44 @@ curry(Math.min, 3)(10)(50)(2); // 2
[⬆ Back to top](#table-of-contents) +### 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); + }; +}; +``` + +
+Examples + +```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 +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### defer Defers invoking a function until the current call stack has cleared. diff --git a/docs/index.html b/docs/index.html index c29967d9b..e1f6a069e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -50,7 +50,7 @@ scrollToTop(); } }, false); - }

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

ary

Creates a function that accepts up to n arguments, ignoring any additional arguments.

Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
ary
Creates a function that accepts up to n arguments, ignoring any additional arguments.
Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).
const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
 
const firstTwoMax = ary(Math.max, 2);
 [[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]
 
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
@@ -845,6 +845,22 @@ console.log<
   arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);
 
curry(Math.pow)(2)(10); // 1024
 curry(Math.min, 3)(10)(50)(2); // 2
+
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.
const debounce = (fn, wait = 0) => {
+  let inDebounce;
+  return function() {
+    const context = this,
+      args = arguments;
+    clearTimeout(inDebounce);
+    inDebounce = setTimeout(() => fn.apply(context, args), wait);
+  };
+};
+
window.addEventListener(
+  'resize',
+  debounce(function(evt) {
+    console.log(window.innerWidth);
+    console.log(window.innerHeight);
+  }, 250)
+); // Will log the window dimensions at most every 250ms
 
defer
Defers invoking a function until the current call stack has cleared.
Use setTimeout() with a timeout of 1ms to add a new event to the browser event queue and allow the rendering engine to complete its work. Use the spread (...) operator to supply the function with an arbitrary number of arguments.
const defer = (fn, ...args) => setTimeout(fn, 1, ...args);
 
// Example A:
 defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'