CODEWITHSUNDEEP
javascriptjquery
Cârnăciov
Cârnăciov

Reputation: 1144

Does javascript loaded via .load run even after it's "deleted"?

I don't know any better way of asking this, or search for it, so here it goes:

I have a webpage that's basically a menu and a big white DIV in the center. All the subpages are loaded inside that div via .load. This is all fine, but:

I want to know if scripts loaded with the page are still going to run after the div's content is changed to another sub-page. To get what I mean, please visit http://carnbox.zapto.org (testing VPS) and log in using the credentials tomi : tomi . Once logged in, go ahead and click on "My Services". All these scripts are inlined in the PHP pages that display the content. I found their lenght to be too small to make them external, and I wished to only load the scripts when viewing the page so the initial loading time of the website is smaller.

After clicking on another page, which will replace the contents of the white space with another page, will the setintervals from the previous page still be running? Will the scripts still be loaded in the user's browser or will they also be wiped?

Or more importantly, will swithing between the pages multiple times cause any trouble for the users?

Is this error related to the way I'm loading scripts, and should I switch to external files and jquery.getscript() ?

Synchronous XMLHttpRequest on the main thread is deprecated because of 
its detrimental effects to the end user's experience. For more help, 
check http://xhr.spec.whatwg.org/

Upvotes: 0

Views: 370

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074535

Yes, JavaScript code loaded by .load continues running even if the elements it was loaded with are removed from the DOM. Removing a script tag has no effect whatsoever on the code that the script loaded.

Here's a live example doing the same thing with html (load ends up calling html under the covers):

var content = [
  // foo
  "This loads a script saying 'foo' once a second " +
  "for 100 seconds." +
  "<script>" +
  "var fooCounter = 0;\n" +
  "var fooTimer = setInterval(function() {\n" +
  "    $('<p>Foo</p>').appendTo(document.body);\n" +
  "    if (++fooCounter >= 100) {\n" +
  "        clearInterval(fooTimer);\n" +
  "    }\n" +
  "}, 1000);\n" +
  "</scr" + "ipt>",
  // bar
  "This loads a script saying 'bar' once a second " +
  "for 100 seconds." +
  "<script>" +
  "var barCounter = 0;\n" +
  "var barTimer = setInterval(function() {\n" +
  "    $('<p>Bar</p>').appendTo(document.body);\n" +
  "    if (++barCounter >= 100) {\n" +
  "        clearInterval(barTimer);\n" +
  "    }\n" +
  "}, 1000);\n" +
  "</scr" + "ipt>"
  ];
$(".load").on("click", function() {
  $("#target").html(content[this.getAttribute("data-index")]);
});
<p>Click 'Load Foo', which loads content in to a target div, then once you see its script running, click 'Load Bar', which replaces the content in that div with new content. Note that now both scripts are running.</p>
<input type="button" data-index="0" class="load" value="Load Foo">
<input type="button" data-index="1" class="load" value="Load Bar">
<div id="target"></div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 2

Related Questions