File tree Expand file tree Collapse file tree 1 file changed +9
-18
lines changed Expand file tree Collapse file tree 1 file changed +9
-18
lines changed Original file line number Diff line number Diff line change @@ -219,28 +219,19 @@ Another common scenario requiring proper cleanup is when using
219219`requestAnimationFrame` to continually redraw into a canvas:
220220
221221```javascript
222- class MyCustomRenderer {
223- constructor() {
224- this.render = this.render.bind(this);
225- this.redrawRequest = requestAnimationFrame(this.render);
226- this.canvasEl = document.createElement(" canvas" );
227- }
228-
229- render() {
230- this.redrawRequest = requestAnimationFrame(this.render);
231-
232- // ... custom rendering goes here...
233- }
234- }
235-
236222export default {
237223 render({ model, el }) {
238- const renderer = new MyCustomRenderer();
239-
240- el.appendChild(renderer.canvasEl);
224+ const canvasEl = document.createElement(" canvas" );
225+ let requestId = requestAnimationFrame(step);
226+
227+ function step() {
228+ /* ... custom rendering goes here... */
229+ requestId = requestAnimationFrame(step);
230+ }
231+ el.appendChild(canvasEl);
241232
242233 return () => {
243- cancelAnimationFrame(renderer.redrawRequest );
234+ cancelAnimationFrame(requestId );
244235 };
245236 },
246237};
You can’t perform that action at this time.
0 commit comments