Detect if any JavaScript function is running
JavaScript on web browsers is single-threaded (barring the use of web workers), so if your JavaScript code is running, by definition no other JavaScript code is running.*
To try to ensure that your script occurs after all other JavaScript on the page has been downloaded and evaluated and after all rendering has occurred, some suggestions:
- Put the script tag for your code at the very end of the file.
- Use the
defer
andasync
attributes on the tag (they'll be ignored by browsers that don't support them, but the goal is to make yours the last as much as we can). - Hook the
window
load
event via a DOM2 style hookup (e.g.,addEventListener
on browsers with standards support, orattachEvent
on older IE versions). - In the
load
event, schedule your code to run after asetTimeout
with a delay of 0ms (it won't really be zero, it'll be slightly longer).
So, the script
tag:
<script async defer src="yourfile.js"></script>
...and yourfile.js
:
(function() {
if (window.addEventListener) {
window.addEventListener("load", loadHandler, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", loadHandler);
}
else {
window.onload = loadHandler; // Or you may want to leave this off and just not support REALLY old browsers
}
function loadHandler() {
setTimeout(doMyStuff, 0);
}
function doMyStuff() {
// Your stuff here. All images in the original markup are guaranteed
// to have been loaded (or failed) by the `load` event, and you know
// that other handlers for the `load` event have now been fired since
// we yielded back from our `load` handler
}
})();
That doesn't mean that other code won't have scheduled itself to run later (via setTimeout
, for instance, just like we did above but with a longer timeout), though.
So there are some things you can do to try to be last, but I don't believe there's any way to actually guarantee it without having full control of the page and the scripts running on it (I take it from the question that you don't).
(* There are some edge cases where the thread can be suspended in one place and then allow other code to run in another place [for instance, when an ajax call completes while an alert
message is being shown, some browsers fire the ajax handler even though another function is waiting on the alert
to be dismissed], but they're edge cases and there's still only one thing actively being done at a time.)
Create a loader
Hi, as javaScript can run async functions or calls, I also needed a way to know when the page was in a stable state. For that purpose, I use a tiny loader in each one of my functions:
var loading_var = 0;
// some functions in your code that may not execute at the same time
// or have to wait an async call
function f1() {
loading_var++;
// code to be exectuted
onready();
}
function f2() {
loading_var++;
// code to be exectuted
onready();
}
// loader function
function onready() {
loading_var--;
if(loading_var == 0) {
// Means all functions have finished executing !
}
}
I often couple it with a freezeClic function to prevent users to interact with the page when there is a script that is still waiting an ajax / async response (and optionnaly display a preloader icon or screen).