Skip to content

Commit 11c494c

Browse files
committed
requestAnimationFrame code example without extra class
1 parent 2461239 commit 11c494c

File tree

1 file changed

+9
-18
lines changed

1 file changed

+9
-18
lines changed

docs/src/pages/blog/anywidget-02.md

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff 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-
236222
export 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
};

0 commit comments

Comments
 (0)