Question

我有以下JavaScript代码段，在使用http://example.com

在Google Chrome中打开新标签后，我在开发者工具控制台中运行该代码段

var jq = document.createElement('script');
jq.src = 'https://code.jquery.com/jquery-latest.min.js';
document.head.appendChild(jq);

if (window.jQuery) {
    window['jqy'] = jQuery.noConflict();
    alert('jQuery is loaded');
}
else {
    alert('jQuery not loaded');
}

它警告第一次没有加载jQuery，即使我看到<script>被添加到DOM。为什么呢？

Answer 1

因为脚本将以异步方式加载，并且在创建脚本标记后需要一段时间才能完全加载。

警报方法在添加脚本标记后立即执行。

要实现这样的功能，您需要一个在完全加载脚本后执行的回调。

也许是这样的？

function loadScript(url, callback) {
  var e = document.createElement("script");
  e.src = url;
  e.type = "text/javascript";
  e.addEventListener('load', callback);
  document.getElementsByTagName("head")[0].appendChild(e);
}

loadScript("https://code.jquery.com/jquery-latest.min.js", function() {
  // This callback will fire once the script is loaded
  if (window.jQuery) {
    window['jqy'] = jQuery.noConflict();
    alert('jQuery is loaded');
  } else {
    alert('jQuery not loaded');
  }
});

Answer 2

javascript中的每个方法可能需要一些时间才能完成分配给它的所需任务。即使appendChild函数也需要一些时间来执行完成的方法。

但是系统不会等待任务完成并执行下一行。因为这是第一次警报即将到来，jquery没有加载。

但是如果在没有加载的情况下再次在控制台中执行相同的功能，则会在加载jquery时提醒您，因为appendchild方法已成功完成其任务。

要克服此问题，需要将任务添加为回调函数。但追加孩子没有任何回调功能。所以我们需要使用setTimeOut函数来解决这个问题。

if（window.jQuery）在加载jQuery后返回false

2 个答案: