January 2022

Non blocking Javascript loading

There are sensors that provide measurement results via javascript. One loads the javascript code from the sensor's web server, and this sets some javascript variables. Like this:

/* --- blocking --- */
<HEAD>
   <script src="http://10.0.1.2/temp.js"></script>
</HEAD>
<BODY>
temperature <script>document.write("outside: "+tempcel + "'C, inside: "+tempincel +"'C ["+temp_time+"]");</script>
<br>
....
</BODY>

This allows me to easily include the data read via the sensor into any web page and design the layout of the web pages as I want. The code in temp.js just sets the variables tempcel, tempincel and temp_time and they can then be used anywhere on the page.

This is very easy to use, but the problem is that any web page blocks until all the included javascript code is loaded. If the web server of the sensor is down, then it prevents the main html page from loading. The temperature reading might not be an important part of that main web page. The temperature reading might be just a little info box on the side of the page. It would be preferable if the actual main web page loaded no matter if the temperature data is available or not. If it is available then show it otherwise just skip it. How can we easily achieve such an asynchronous and non blocking behavior of javascript?

Here is the solution:

/* --- non-blocking --- */
<HEAD>
    <script>
    function writetmp(){
    var jtemptag=document.getElementById("jtemp");
    jtemptag.firstChild.nodeValue ="outside: "+tempcel + "'C, inside: "+tempincel +"'C ["+temp_time+"]";
    }
    </script>
   <script async src="http://10.0.1.2/temp.js" onload="writetmp()"></script>
</HEAD>
<BODY>
temperature <span id="jtemp">?</span>
<br>
....
</BODY>

The async key-word causes the page to load first and the loading of the javascript code happens in the background without blocking the main page. Once the javascript code with the temperature data is loaded the function writetmp() is called to add the temperature data reading into the web page. If the sensor is down then you just see "temperature ?" on the page but everything else is still displayed.

The above code works however in theory there is a problem that writetmp() could potentioally be loaded before the main body of the page containing id="jtemp" is loaded. If you want to avoid this potential execution of code while the html body is loaded then just put the writetmp() function near the end of the page and into the page body. Like this:

/* --- non-blocking --- */
<HEAD>
</HEAD>
<BODY>
temperature <span id="jtemp">?</span>
<br>
    <script>
    function writetmp(){
    var jtemptag=document.getElementById("jtemp");
    jtemptag.firstChild.nodeValue ="outside: "+tempcel + "'C, inside: "+tempincel +"'C ["+temp_time+"]";
    }
    </script>
   <script async src="http://10.0.1.2/temp.js" onload="writetmp()"></script>
<br>
....
</BODY>

Back to: "No preservatives added"