Detect if script has already loaded or not
Solution 1
Another option is letting .getScript()
run but let it take the script from browser's cache so you won't have it reloaded each and every time.
To achieve this, add such code:
$.ajaxSetup({
cache: true
});
This is taken from the documentation page.
Solution 2
Set a flag when file loaded successfully. If flag is set then skip the file loading again.
Try this code,
var isLoaded = 0; //Set the flag OFF
$(document).ready(function() {
$("#load").click(function(){
if(isLoaded){ //If flag is ON then return false
alert("File already loaded");
return false;
}
$.getScript('helloworld.js', function() {
isLoaded = 1; //Turn ON the flag
hello();
});
});
});
Solution 3
So why not only fire the event once like this:
$("#load").one("click", function() {
$load = $(this);
$.getScript('helloworld.js', function() {
hello();
// bind hello to the click event of load for subsequent calls
$load.on('click', hello);
});
});
That would prevent subsequent loads and avoids the use of a global
Solution 4
You could create a helper function:
var getScript = (function() {
var loadedFiles = {};
return function(filename, callback) {
if(loadedFiles[filename]) {
callback();
} else {
$.getScript(filename, function() {
loadedFiles[filename] = true;
callback();
});
}
};
})();
oshirowanen
Updated on July 27, 2022Comments
-
oshirowanen almost 2 years
It seems that
helloworld.js
gets loaded multiple times based on the number of times I click#load
. I say this because when I look at Google Chromes Developer Tools Network tab, it showshelloworld.js
as many times as I click#load
.$(document).ready(function() { $("#load").click(function(){ $.getScript('helloworld.js', function() { hello(); }); }); });
The
hello()
function looks like this:function hello(){ alert("hello"); }
Is it possible to detect if
helloworld.js
has already loaded?So if it hasn't loaded, load it, and if it has loaded, don't load it.
This is what Developer Tools currently shows me if I click the
#load
button 4 times: -
Kevin B over 11 yearsAnd to add, use
$("#load").click(hello)
afterhello()
to make subsequent clicks to#load
call thehello
method without re-loading the js. -
Šime Vidas over 11 yearsImplementing such a cache system is not that trivial. For instance, what if
getScript
is invoked multiple times for the same file name before the file in question is retrieved and executed? -
pimvdb over 11 years@Šime Vidas: Good point. On the other hand, that would only happen if you click multiple times very fast after each other, which may not be worth caring about.
-
oshirowanen over 11 years@Gabe, I need to run the
hello()
function many times, but need to load thehelloworld.js
only once. -
Šime Vidas over 11 yearsAs both my parents regularly double-click on buttons, and links on web-pages, I think this scenario would occur more often than you think
:P
-
Rajshekar Reddy about 8 yearsIf the script file has some event binding code wouldn't the event bind multiple times, each time the file is loaded or taken from the cache?
-
Shadow The Kid Wizard about 8 years@Reddy that is true, didn't think of it. My answer is an alternative to this other answer, which advice to use the
.one()
which I must admit is better in this case. -
Rajshekar Reddy about 8 yearsno problem in your answer at all. Was just curious to know, Because I have a issue where I load a html page which has local scripts within it and the events are binding multiple times. Just wanted to know if it is the same when read from cache.
-
Shadow The Kid Wizard about 8 years@Reddy yeah, it will probably bind them again indeed, though it's worth checking in depth.