如果(window.jQuery)在加载jQuery后返回false

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

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

alert方法是在添加脚本标记之后执行的。

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

也许是这样的？

​

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函数来解决这个问题。