0

In my webpage, I have some HTML elements and some JavaScript functions that act on them. I want my HTML elements to be fully loaded before JavaScript functions run.

For example, I have <div id="buttonsection"></id>. I want buttonsection div to load first before my updateButtonSection() run.

At first, I was doing this by using timeout:

setTimeout("updateButtonSection()", 1500);

However, if timeout is too short, the updateButtonSection will run before buttonsection div finish loading. But if timeout is too long, users with good internet speed will have not have a good experience since users have to wait on the timeout.

So then I decided to check if div is loaded before running the JavaScript function.

function updateMarkerButton(){

  //if elements not loaded, wait 1 second and then call itself 
  if(document.getElementById('buttonsection') === null ){
    setTimeout("updateMarkerButton()", 1000);
  }else{
    ....
  }

This mostly works until I find out if I am already on the webpage with everything loaded, if I call my refresh function, then updateMarkerButton will run immediately because the current buttonsection div is already loaded so document.getElementById('buttonsection') is not null; thus updateMarkerButton will not wait for buttonsection div to reload before it runs.

Any suggestion on how else I can prevent this racing condition so JavaScript functions only run after HTML elements finish loading?

help
  • 809
  • 5
  • 18
  • 35
  • Try JQuery $(document).ready(function(){ }) as it is called after all html elements are loaded . – Naveed Khan Oct 19 '21 at 18:34
  • If you're just waiting on the initial HTML to load, look at [$(document).ready equivalent without jQuery](https://stackoverflow.com/q/799981/215552). If you're loading after document load, and want to wait for an element to exist, look at [Make function wait until element exists](https://stackoverflow.com/q/5525071/215552) – Heretic Monkey Oct 19 '21 at 18:41
  • Does this answer your question? [$(document).ready equivalent without jQuery](https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) – Heretic Monkey Oct 19 '21 at 18:55
  • @Heretic Monkey thank for you answering my question. But wont ready function have same issue as me checking if element exist for refresh case. Because in refresh case, the element already exist and is ready before refresh finish, so my updateMarkerButton can run immediately instead of waiting. – help Oct 20 '21 at 21:21
  • Did you read the comment I posted before the last one? I asked that for a purpose. However, you did not respond in a timely manner, so I went with the more obvious and often asked of the two questions. Look at the other one and see if that one is more like what you're looking for. – Heretic Monkey Oct 20 '21 at 21:28

2 Answers2

1

If the script tag comes after the element then it will ensure the script runs after the element is created
That's why there is a practice to put the script tags at the end of the body

Glass Cannon
  • 394
  • 3
  • 9
  • I also have refresh function that refresh some elements within the page. So just having script after element does not in that case. – help Oct 20 '21 at 21:14
  • That doesn't invalidate this answer. If you are loading the script via jQuery.ajax as well then it will still work. But if not then you need to re-run the code after refreshing the elements. – Glass Cannon Oct 21 '21 at 06:59
1

The window load event fires when the HTML is fully loaded:

window.addEventListener('load', (event) => {
  console.log(`I'm ready for you now, sweetheart.`);
});
MikeM
  • 13,156
  • 2
  • 34
  • 47