在加载外部脚本之前，不要执行其余代码(Don't execute rest of code until external script loads)

在加载外部脚本之前，不要执行其余代码(Don't execute rest of code until external script loads)

我正在研究一个小的书签脚本（一个大的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脚本块那么简单。

I'm working on a tiny bookmarklet script (one big IIFE ). The script was previously created for pages that contain jQuery, and uses jQuery extensively.

The problem is we are now beginning to move away from jQuery in some of our products, but still need this bookmarklet to function the same way.

So, I want to update the bookmarklet so that it will first check if jQuery exists on the page.

if jQuery, continue execution as normal.

If !jQuery, download jQuery (AJAX), THEN execute the rest of the script.

The problem is I'm not sure how to do this inside of an IIFE. Since fetching the script would be an async action, how do I make sure jQuery is downloaded and good to go before continuing the script? This is what I have so far..

(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')... })()

note that since this is a bookmarket, it gets injected into the page after load/render, so it's not as simple as placing a jQuery script block higher in the head.

最满意答案

在javascript中，您需要回调来处理异步操作。

在您的示例中，我们可以针对两种情况执行此类回调： a）jQuery已经定义 b）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')... });

In javascript you need a callback to handle async operations.

In your example we can execute such a callback for two scenarios: a) jQuery is already defined b) jQuery was downloaded and is ready to use

So we change your code a little bit and pass a callback to the IIFE which contains the main application and call it for both scenarios.

(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')... });