在外部脚本加载之前，不要执行其余代码

Question

我正在研究一个小书签脚本（一个大IIFE）。该脚本以前为包含jQuery的页面创建，并广泛使用jQuery。

问题是我们现在开始从我们的某些产品中的jQuery中移开，但仍需要这个书签以相同的方式工作。

因此，我想更新bookmarklet，以便它首先检查jQuery是否存在于页面上。

如果jQuery，继续执行正常。

如果！jQuery，请下载jQuery（AJAX），那么执行脚本的其余部分。

问题是我不知道如何做到这一点在一个IIFE。由于获取脚本将是一个异步操作，我如何确保jQuery在下载之前继续运行，并继续执行脚本？这是我迄今为止..

(function() { 
    var continueExec = true; 
    if (!window.jQuery) { 
     continueExec = false; 
     var s = document.createElement('script'); 
     s.onload = function() { 
      continueExec = true; 
     }; 
     s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     document.head.appendChild(s); 
    } 
     // .. now I want to be able to use jQuery here. What do I need to change? 
     // $('.className')... 
})() 

注意，因为这是一个bookmarket，它被注入到页面后，加载/渲染，所以它不是在头部放置一个jQuery脚本块更高的那样简单。

Answer 1

在javascript中，你需要一个回调来处理异步操作。
一）jQuery的已定义
二）jQuery的已下载并准备使用

所以我们改变你的代码一点点：

在您的例子，我们可以为两种情况下执行这样的回调将回调传递给包含主应用程序的IIFE并在两种情况下调用它。

(function (callback) { 
    if (!window.jQuery) { 
     var s = document.createElement('script'); 
     s.onload = function() { 
      // Start the main application once jQuery was load: 
      callback(window.jQuery); 
     }; 
     s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     document.head.appendChild(s); 
    } else { 
     // Start the main application directly as jQuery is already part of the page: 
     callback(window.jQuery); 
    } 
})(function($) { 
    // The main application 
    // 
    // here you can use 
    // $('.className')... 
});