jQuery 2.1 |延迟功能直到手动加载外部脚本

Question

这是我的困境：浏览器硬刷新会清空浏览器缓存，而当互联网连接丢失时发生这种情况，当互联网连接恢复时我无法使用我的应用程序。因此，我想通过一个按钮手动（无缝）重新加载 Google 的 client.js 脚本和相关的 Youtube APIv3。

是否有适当的方法来推迟函数（获取 Youtube 数据），直到成功手动加载所有必需的 Youtube 脚本？在轮询所需的外部资源之前，该函数首先必须检查浏览器缓存中是否有所需的 Youtube 资源。

我有这段代码，但不知道如何设置connection() 和延迟 正确。帮助将不胜感激：

function connection() {
// How to verify if needed resources are in browser cache, if not,
// fetch them externally?
// apis.google.com/js/client.js?onload=googleApiClientReady
}

function googleApiClientReady(){ gapi.client.setApiKey('API key');
gapi.client.load('youtube', 'v3', function(){
appdefaults();
});
}

function lostconnection() {
alert('Connection lost.');
}

function verifynetwork(){ // Check connection status
var i = new Image();
i.onload = connection;
i.onerror = lostconnection;
i.src = '//img.youtube.com/vi/4xmckWVPRaI/1.jpg?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image
// coming from cache.
}

$(function(){
$('#YTdata').on('click', function(){
verifynetwork();
ytdata(); // Defer this function until verifynetwork() has completed?
}

<button id="YTdata">Get data</button>

Answer 1

当网络不可用时，我没有完全按照你的想法去做，但这里有一个 verifyNetwork() 的版本，它会告诉你网络是否可用，使用 jQuery 承诺：

function verifyNetwork() {
    var d = $.Deferred();
    var img = new Image();
    img.onload = d.resolve;
    img.onerror = d.reject;
    img.src = '//img.youtube.com/vi/4xmckWVPRaI/1.jpg?d=' + new Date().getTime();
    return d.promise();
}

$(function() {
    $('#YTdata').on('click', function() {
        verifyNetwork().then(function() {
            // network is available
        }, function() {
            // network is not available
        })
    });
});

---

如果您有多个要等待的异步事情，那么您可以让每个事情都返回一个承诺，该承诺将在资源准备好时得到解决，然后您可以使用 jQuery 的 $.when() 在所有承诺完成时得到通知解决了。​​

---

检测网络连接的其他参考资料：

Check if Internet Connection Exists with Javascript?

Detect that the Internet connection is offline?

How to detect online/offline event cross-browser?

Check If Internet Connection Exists in JavaScript