Script-Include and inline JS race condition?

Juergen Stein · Nov 10, 2005

Hi Group,

I couldn't find an answer on this with Google, so let me test you

I've a fairly complex WebApp, and I put most of the JS code in
independent external .js files. One of these external files contains a
class A. The inline JS then inherits a class B from A.

My question is now, since the class A is defined in the external file,
is the class A definitely known at the point where I use it? I could
imagine a case where the external js is loaded much slower, so the
js-parser would already try to new A() without knowing of it.

If I would run in a race condition, how could I get around it?

Thanks in advance.
-j

The html looks like this:

<html>
<head>
<script src="class_a.js" type="text/javascript"></script>
</head>
<body>
...
</body>
<script type="text/javascript">
// inline code
function B()
{
this.is="cool";
}

B.prototype = new A();
B.prototype.constructor=B;
</script>
</body>
</html>

Martin Honnen · Nov 10, 2005

Juergen Stein wrote:

I've a fairly complex WebApp, and I put most of the JS code in
independent external .js files. One of these external files contains a
class A. The inline JS then inherits a class B from A.

My question is now, since the class A is defined in the external file,
is the class A definitely known at the point where I use it? I could
imagine a case where the external js is loaded much slower, so the
js-parser would already try to new A() without knowing of it.

No, the browser, its HTML parser and its calls to the script engine are
smart enough to block HTML parsing until that external script file has
been loaded and the script has been executed. After all the script could
add content with document.write.
If you have
<script src="file.js" type="text/javascript"></script>
then that will be processed first and you can be assured that further
script has access to the variables and functions defined in file.js as
long as not load problems and no script errors occur.
The exeception would be
<script src="file.js" type="text/javascript" defer></script>
but only IE supports defer anyway as far as I know.

web.dev · Nov 10, 2005

Juergen said:
Hi Group,

I couldn't find an answer on this with Google, so let me test you

I've a fairly complex WebApp, and I put most of the JS code in
independent external .js files. One of these external files contains a
class A. The inline JS then inherits a class B from A.

My question is now, since the class A is defined in the external file,
is the class A definitely known at the point where I use it? I could
imagine a case where the external js is loaded much slower, so the
js-parser would already try to new A() without knowing of it.

If I would run in a race condition, how could I get around it?

Thanks in advance.
-j

The html looks like this:

<html>
<head>
<script src="class_a.js" type="text/javascript"></script>
</head>
<body>
...
</body>
<script type="text/javascript">
// inline code
function B()
{
this.is="cool";
}

B.prototype = new A();
B.prototype.constructor=B;
</script>
</body>
</html>

The best way to know is to try it out yourself. But yes, in the
example you shown above, class A will always be known to B. When you
include external js files in the head, as the browser loads the page,
it will load each external js file before continuing on to the rest of
the page. There will be a situation where class A won't be available
immediately. Using the same example from above, if you instead include
the external js file after your script for class B, then it wouldn't
work. Because class A is not available yet.

Hope this helps.

Juergen Stein · Nov 10, 2005

Thanks for the clarification.

Awesome smart these browsers

-j

Content-Security-Policy: where to place JavaScript	2	Dec 2, 2025
Now Playing Script and Who's Listening	0	Sep 22, 2025
External JS file question	5	Mar 5, 2021
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
Issue with textbox script?	0	Sep 4, 2022
Help me sort out this script	1	Oct 17, 2023
Using JS to verify registration info?	1	Mar 19, 2020
How to check the validation of js files or html files including js?	6	Jan 12, 2020

Script-Include and inline JS race condition?

Juergen Stein

Martin Honnen

web.dev

Juergen Stein

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads