Running Your Code at the Right Time

programming
1

I have read your " Running Your Code at the Right Time"
so I wrote some code to test it out (chrome):
I put the scripts at bottom of page , and expected them to run after the page was fully loaded . But the [h5] didn’t display until after both scripts were run .
? Why doesn’t the [h5] display before the scripts were run ?
Also , in general:
? Is script positioned ‘at page bottom’ the best place to ‘add.listeners’ ?
I haven’t been here for a while , and have forgotten how to display code , Each Forum has their own protocol .
I wish you would have a sticky post , as Top Post titled “How to display code” in your Posts" . I’ll try a few .

<!DOCTYPE html>
<html>
  <head>
       <style>
	   
	   </style>
	   <script>
function pageHasFullyLoaded() {
  alert("1) Page has FULLY loaded");
}

function firstScriptHasCompleted() {
  alert("2) first Script Has Completed ! ");
}
	   </script>
  </head>
  <body>
  
<h5>Hello World!</h5>

<script>
pageHasFullyLoaded()
</script>

<script>
    firstScriptHasCompleted()
</script>

</body>
</html>
2

Hey @vmars316! Using alert is often a bit strange in how it interrupts everything else on the page, but if you set a breakpoint and step through the code in the debugger, the order of code running is maintained:

image
image2672×2436 611 KB

You can verify by printing the contents of our h5 element:

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
  <script>
    function pageHasFullyLoaded() {
      alert(document.querySelector("h5").textContent);
    }

    function firstScriptHasCompleted() {
      console.log("2) first Script Has Completed ! ");
    }
  </script>
</head>

<body>

  <h5>Hello World!</h5>

  <script>
    pageHasFullyLoaded()
  </script>

  <script>
    firstScriptHasCompleted()
  </script>

</body>

</html>

If the code ran earlier than when it should, the value of the h5 tag won’t be displayed in the alert :slight_smile:

As for the best place to add listeners, I prefer it at the bottom of the page. The only time might be if I need to intercept some event immediately prior to the page having fully loaded.

For the code commenting question, yes - this comes up enough times where we may need a dedicated sticky topic haha. Here is a collection of the various ways we have on these forums for formatting code: Lists in html - italics

:panda_face:

3

To add to what kirupa said, though the browser may have read and interpreted the HTML tags before running the code, it doesn’t mean it has displayed the HTML to the screen. This process can be slightly deferred, and generally not something that’s a problem normally because it usually happens so fast. But because alerts (and prompts and confirm dialogs) are a kind of UI that also blocks the main UI thread, you can get into situations where you’re in a time period between reading HTML tags and displaying them, where, if a dialog like alert appears, you are able to see that the HTML has not yet rendered, and until the dialog is dismissed, block it from being rendered.

BTW, there is a little trick if you want to run something like an alert after the page is rendered. You can go through a double-requestAnimationFrame callback. requestAnimationFrame allows you to run code right before you render, and if you do two, it will run code after the first render (and before the second render).

requestAnimationFrame(() => requestAnimationFrame(pageHasFullyLoaded))
1 Like