4

The original question was: "Vanilla javaScript DOM queries. How to make sure async code has completed in front-end before continuing?"

but I changed the title, so that it would be more useful to search queries, and show what info is actually being given in the answer.

You'll notice that, based on the code that I provided, I thought that DOM manipulations were asynchronous. The answers pointed out that it is not.

If code like this is asynchronous:

let elements = document.querySelectorAll('div');

Then, how do you make sure that all of the 'div' elements have been stored to the variable 'elements' before looping over them?

let elements = document.querySelectorAll('div');
//how do you know that all of the elements will 
//have been retrieved in time to run this for loop:
for(let i = 0 ; i < elements.length ; i++) {    
    let div = elements[i];    console.log(div);   
}
Maiya
  • 932
  • 2
  • 10
  • 26
  • 1
    It's not asynchronous. – Andrew Li Feb 08 '18 at 21:11
  • 1
    It isn't async, so no problem. Do you mean if the elements haven't loaded yet? –  Feb 08 '18 at 21:11
  • 1
    not seeing the issue here... please read some js reference before asking here for help. querySelectorAll is not async... – Pierre Feb 08 '18 at 21:12
  • 2
    @Pierre does some documentation out there specifically state whether `querySelectorAll` is async or not? Do you have a link? – Andrew Lohr Feb 08 '18 at 21:14
  • 1
    @AndrewLohr: Synchronous is the norm for JS methods. The async methods are the odd ones, so those are the ones that get documented as such. –  Feb 08 '18 at 21:17
  • 1
    @Maiya — "any time you interact with the DOM, it is an asynchronous operation" — It isn't. "Sometimes, when I run code like this" — If you have code that has a problem, provide a [mcve] which actually demonstrates it, don't guess at the cause problem then create a test case which doesn't demonstrate it. – Quentin Feb 08 '18 at 21:18
  • @Maiya: If you're getting `undefined`, then your counter `i` is counting to the wrong bounds. –  Feb 08 '18 at 21:19
  • SkinnyPete I was trying to write as bare-bones of an example as possible. Based on @Quentin 's answer below, I see that the problem was: writing to the DOM is asynchronous, and querying the DOM is synchronous. My original code was combining these two things. Next time, I'll post the original example. Thanks! – Maiya Feb 08 '18 at 21:52
  • "writing to the DOM is asynchronous" — Not usually! – Quentin Feb 08 '18 at 21:53
  • @Quentin ok, thanks. – Maiya Feb 08 '18 at 22:10
  • @Pierre I wish there was a section on here where newbies can ask questions without some professionals getting annoyed. Just because I couldn't find the answer doesn't mean that I didn't look. Thanks. – Maiya Feb 08 '18 at 22:11
  • @SkinnyPete Thanks. No, I did a window.onload = function(){}. I think my understanding of how the DOM is written is not yet correct, as I thought that when you read and wrote to the DOM it was async. – Maiya Feb 08 '18 at 22:16
  • 2
    You're getting lots of help here. Ignore "votes". The information is what counts. Being quickly responsive to comments and answers (as you have been) will afford you the best chance at getting personalized help. –  Feb 08 '18 at 22:31
  • This question is a duplicate, you can find the answer here: https://stackoverflow.com/a/50026257/9314312 – Null Apr 12 '19 at 15:42
  • 1
    The title of the question and the simple answer deserve way more upvotes. I would have liked to improve your question and answer but the edit queue is full, I'll wait! – Puka Nov 03 '21 at 14:59

2 Answers2

4

If code like this is asynchronous

It isn't querySelectorAll is not an asynchronous function.

how do you make sure that all of the 'div' elements have been stored to the variable

Do nothing.

The only reason you might need to wait is if a previous function was asynchronously adding content to the DOM, in which case you would have to wait for that function to finish.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • https://developer.mozilla.org/en-US/docs/Web/API/NodeList#A_sometimes-live_collection – Haje Feb 08 '18 at 21:13
  • @Haje — (a) That would mean the value might be modified by subsequent code … which couldn't run before the loop in the question had finished, so it is irrelevant and (b) [elementList is a **non-live** NodeList of element objects](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) – Quentin Feb 08 '18 at 21:15
  • @Haje thanks, that did help with my understanding of storing DOM elements to a variable. – Maiya Feb 08 '18 at 21:46
4

I think good teachers spot what the misunderstanding is and clarify it, instead of reflexively down-voting beginner-level questions.

I previously thought that because the DOM was a separate interface (ie vanilla js interacting with the browser), that reading and writing to it was similar to reading and writing to a database; and the errors in my code seemed to fit into this paradigm.

Actually, the JS scripts are being executed in the same environment that the DOM lives in, so it is not asynchronous. Asynchronous events are events that generally get sent to another environment, and then return by lining up in the event loop.

Easy to understand definition of "asynchronous event"?

https://eloquentjavascript.net/11_async.html

Maiya
  • 932
  • 2
  • 10
  • 26