From d4630485a0a0077fb2e619cbe8b2bd4bc08d1301 Mon Sep 17 00:00:00 2001 From: Alex Reardon Date: Wed, 22 Nov 2017 09:26:40 +1100 Subject: [PATCH] Moving to new raf-schd cancel syntax. Cleaning up language --- content/docs/faq-functions.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index b421f888..42c93a6f 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -222,15 +222,15 @@ class Alphabet extends React.Component { If you have an event handler such as `onClick` or `onScroll` and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be done by using: -- **throttling**: sample changes based on a time based frequency ([`_.throttle`](https://lodash.com/docs#throttle)) -- **debouncing**: publish changes after a period of inactivity ([`_.debounce`](https://lodash.com/docs#debounce)) -- **`requestAnimationFrame` throttling**: sample changes based on [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) ([`raf-schd`](https://github.com/alexreardon/raf-schd)) +- **throttling**: sample changes based on a time based frequency (eg [`_.throttle`](https://lodash.com/docs#throttle)) +- **debouncing**: publish changes after a period of inactivity (eg [`_.debounce`](https://lodash.com/docs#debounce)) +- **`requestAnimationFrame` throttling**: sample changes based on [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) (eg [`raf-schd`](https://github.com/alexreardon/raf-schd)) -See [this visualization](http://demo.nimius.net/debounce_throttle/) for a comparison of `throttle` and `debounce` functions +See [this visualization](http://demo.nimius.net/debounce_throttle/) for a comparison of `throttle` and `debounce` functions. > Note: > -> `_.debounce` and `_.throttle` provide a `cancel` method to cancel delayed callbacks. You should either call this method from `componentWillUnmount` _or_ check to ensure that the component is still mounted within the delayed function. Similarly, `raf-schd` returns a `frameId` that you can use to cancel the next animation frame when the component unmounts with `cancelAnimationFrame` +> `_.debounce`, `_.throttle` and `raf-schd` provide a `cancel` method to cancel delayed callbacks. You should either call this method from `componentWillUnmount` _or_ check to ensure that the component is still mounted within the delayed function. #### Throttle @@ -304,7 +304,7 @@ class Searchbox extends React.Component { #### `requestAnimationFrame` throttling -[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. It is very similar to `setTimeout` except it takes no time argument. A function that is queued with `requestAnimationFrame` will fire in the next frame. The browser will work hard to ensure that there are `60` frames per second (`60 fps`). However, if the browser is unable to it will naturally *limit* the amount of frames in a second. For example, a device might only be able to handle `30 fps` and so you will only get `30` frames in that second. Using `requestAnimationFrame` for throttling is a useful technique in that it prevents you from doing more than `60 updates` in a second. If you are doing `100` updates in a second this creates additional work for the browser that the user will not see anyway. +[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. A function that is queued with `requestAnimationFrame` will fire in the next frame. The browser will work hard to ensure that there are `60` frames per second (`60 fps`). However, if the browser is unable to it will naturally *limit* the amount of frames in a second. For example, a device might only be able to handle `30 fps` and so you will only get `30` frames in that second. Using `requestAnimationFrame` for throttling is a useful technique in that it prevents you from doing more than `60 updates` in a second. If you are doing `100` updates in a second this creates additional work for the browser that the user will not see anyway. > Using this technique will only capture the last published value in a frame. You can see an example of how this optimization works on [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) @@ -314,8 +314,6 @@ import rafSchedule from 'raf-schd'; class ScrollListener extends React.Component { constructor(props) { super(props); - // keep a record of the id of the next animation frame - this.nextFrameId = null; this.handleScroll = this.handleScroll.bind(this); // create a new function that will schedule updates @@ -327,7 +325,7 @@ class ScrollListener extends React.Component { // If we receive many updates within a single frame duration we will // only be publishing the latest value. - this.nextFrameId = this.scheduleUpdate({ x: e.clientX, y: e.clientY }); + this.scheduleUpdate({ x: e.clientX, y: e.clientY }); } emitUpdate(point) { @@ -336,7 +334,7 @@ class ScrollListener extends React.Component { componentWillUnmount() { // As we are unmounted we can clear the next animation frame - cancelAnimationFrame(this.nextFrameId); + this.scheduleUpdate.cancel(); } render() {