setTimeout/setInterval/requestAnimationFrame in the JS Learning area

[wbamberg]

I'm currently working on a project to update the JS learning area to use "modern JS", whatever that is. At the moment I'm working on the module about asynchronous JavaScript: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous .

The general outline of this is pretty clear:

• what asynchronous programming is and why we have async APIs
• a bit about the old days and callbacks and why we don't do that so much any more
• promises
• async/await

But in the middle of the module at the moment is a long article on "cooperative asynchronous JavaScript", which covers setTimeout, setInterval, and requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals. As far as I can tell the content here is OK from a "modern JS" point of view, but it feels very out of place in the general shape of the module.

I think it might be better to move the article into the "Client-side Web APIs" module, which is already (by its nature) a bit of a hodge-podge.

But I'm interested in hearing opinions, which is why I'm posting here.

I'm also interested in hearing opinions about whether I should update the content of this page. As I said it looks more or less OK to me, but we could perhaps shorten the stuff on setInterval() since in most cases requestAnimationFrame() is likely to be a better option.

[dontcallmedom]

A few thoughts:

• setTimeout et al aren't a bad way to introduce asynchronous programming; whether they need to be introduced in depth to introduce the concept I'm less sure
• the title "cooperative async JS" is weird; I know it's not one that I would have used, nor one that evokes anything related to setTimeout et al
• while there are a number of use cases where requestAnimationFrame is a better replacement to setInterval, that's not a general statement (e.g. a timer); in particular, I don't think we should keep the qualification in the article of the former being a modern version of the latter; conversely, it would be useful if the introduction of the section on setInterval had a link to requestAnimationFrame explaining when it is a better alternative

All in all, my thinking would be:

• consider whether setTimeout can be used as a gentle on-ramp for asynchronous programming (I know I've used it in courses I gave on this in the past), but not necessarily doing the deep dive on its syntax and semantics in the async section
• move the deep dive and the description of the other two in client-side APIs (for lack of a better subcategorization)
• clean up the relationship between setInterval and requestAnimationFrame

(as an aside, clearTimeout could be used as on-ramp or in a similar context to AbortController - not sure if that is or even should be covered in this learning area)

[ddbeck]

I have one thing to add on using setInterval versus requestAnimationFrame: setInterval is available in Node and Deno (and probably most other JS runtimes), while requestAnimationFrame is more or less browser-only. I think it's a nice-to-have to at least make readers aware of the more general thing first, before getting into requestAnimationFrame.

[wbamberg]

Thanks both! Super helpful. I like your proposal here Dominique.

I already have a PR up with some fairly small changes to the "Introducing" page (mdn/content#12440) although I am fighting the urge to rewrite that, especially given issues like mdn/content#10442, which although they are completely non-actionable I can see some truth in.

[wbamberg]

Also though: while I can see setTimeout being a possible on-ramp for async, aren't event handlers also one, and one that we have already covered in the course, so wouldn't need us to introduce a new concept?