通过.load加载的javascript是否会在“删除”之后运行？

Question

我不知道有什么更好的方式来询问它，或者搜索它，所以这就是：

我的网页基本上是一个菜单，中间有一个大的白色DIV。所有子页面都通过.load加载到div中。这一切都很好，但是：

我想知道在div的内容更改为另一个子页面后，是否仍然会运行加载页面的脚本。要了解我的意思，请访问http://carnbox.zapto.org（测试VPS）并使用凭据tomi：tomi登录。 登录后，继续并单击“我的服务”。所有这些脚本都在显示内容的PHP页面中内联。我发现它们的长度太小而不能使它们外部，我希望只在查看页面时加载脚本，这样网站的初始加载时间就会缩短。

点击另一个页面后，将用另一个页面替换空白区域的内容，上一页的设置间隔是否仍在运行？脚本是否仍会在用户的浏览器中加载，还是会被擦除？

或者更重要的是，多次在页面之间切换会给用户带来麻烦吗？

这个错误是否与我加载脚本的方式有关，我应该切换到外部文件和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/

Answer 1

是的，.load加载的JavaScript代码会继续运行，即使从DOM中删除了加载的元素。删除script代码对script加载的代码无效。

以下是使用html做同样事情的实际示例（load最终调用了html封面）：

＆＃13;

＆＃13;

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")]);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;