diff --git a/README.md b/README.md index 4b1d509e2..1a460f572 100644 --- a/README.md +++ b/README.md @@ -209,6 +209,7 @@ average(1, 2, 3); * [`off`](#off) * [`on`](#on) * [`onUserInputChange`](#onuserinputchange-) +* [`recordAnimationFrames`](#recordanimationframes) * [`redirect`](#redirect) * [`runAsync`](#runasync-) * [`scrollToTop`](#scrolltotop) @@ -3444,6 +3445,54 @@ onUserInputChange(type => {
[⬆ Back to top](#table-of-contents) +### recordAnimationFrames + +Invokes the provided callback on each animation frame. + +Use recursion. +Provided that `running` is `true`, continue invoking `window.requestAnimationFrame()` which invokes the provided callback. +Return an object with two methods `start` and `stop` to allow manual control of the recording. +Omit the second argument, `autoStart`, to implicitly call `start` when the function is invoked. + +```js +const recordAnimationFrames = (callback, autoStart = true) => { + let running = true, + raf; + const stop = () => { + running = false; + cancelAnimationFrame(raf); + }; + const start = () => { + running = true; + run(); + }; + const run = () => { + raf = requestAnimationFrame(() => { + callback(); + if (running) run(); + }); + }; + if (autoStart) start(); + return { start, stop }; +}; +``` + +
+Examples + +```js +const cb = () => console.log('Animation frame fired'); +const recorder = recordAnimationFrames(cb); // logs 'Animation frame fired' on each animation frame +recorder.stop(); // stops logging +recorder.start(); // starts again +const recorder2 = recordAnimationFrames(cb, false); // `start` needs to be explicitly called to begin recording frames +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### redirect Redirects to a specified URL. diff --git a/docs/index.html b/docs/index.html index 8b71db2f2..394f1fc11 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,7 +74,7 @@ document.getElementById('doc-drawer-checkbox').checked = false; } }, 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);
@@ -750,6 +750,31 @@ document.bodyShow examples
onUserInputChange(type => {
   console.log('The user is now using', type, 'as an input method.');
 });
+
recordAnimationFrames
Invokes the provided callback on each animation frame.
Use recursion. Provided that running is true, continue invoking window.requestAnimationFrame() which invokes the provided callback. Return an object with two methods start and stop to allow manual control of the recording. Omit the second argument, autoStart, to implicitly call start when the function is invoked.
const recordAnimationFrames = (callback, autoStart = true) => {
+  let running = true,
+    raf;
+  const stop = () => {
+    running = false;
+    cancelAnimationFrame(raf);
+  };
+  const start = () => {
+    running = true;
+    run();
+  };
+  const run = () => {
+    raf = requestAnimationFrame(() => {
+      callback();
+      if (running) run();
+    });
+  };
+  if (autoStart) start();
+  return { start, stop };
+};
+
const cb = () => console.log('Animation frame fired');
+const recorder = recordAnimationFrames(cb); // logs 'Animation frame fired' on each animation frame
+recorder.stop(); // stops logging
+recorder.start(); // starts again
+const recorder2 = recordAnimationFrames(cb, false); // `start` needs to be explicitly called to begin recording frames
 
redirect
Redirects to a specified URL.
Use window.location.href or window.location.replace() to redirect to url. Pass a second argument to simulate a link click (true - default) or an HTTP redirect (false).
const redirect = (url, asLink = true) =>
   asLink ? (window.location.href = url) : window.location.replace(url);
 
redirect('https://google.com');
diff --git a/snippets/recordAnimationFrames.md b/snippets/recordAnimationFrames.md
index 100504eb9..a775e0460 100644
--- a/snippets/recordAnimationFrames.md
+++ b/snippets/recordAnimationFrames.md
@@ -9,24 +9,25 @@ Omit the second argument, `autoStart`, to implicitly call `start` when the funct
 
 ```js
 const recordAnimationFrames = (callback, autoStart = true) => {
-  let running = true, raf
+  let running = true,
+    raf;
   const stop = () => {
-    running = false
-    cancelAnimationFrame(raf)
-  }
+    running = false;
+    cancelAnimationFrame(raf);
+  };
   const start = () => {
-    running = true
-    run()
-  }
+    running = true;
+    run();
+  };
   const run = () => {
     raf = requestAnimationFrame(() => {
-      callback()
-      if (running) run()
-    })
-  }
-  if (autoStart) start()
-  return { start, stop }
-}
+      callback();
+      if (running) run();
+    });
+  };
+  if (autoStart) start();
+  return { start, stop };
+};
 ```
 
 ```js