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
        })
    });
});

如果您有多个要等待的异步事物，那么您可以让每一个 return 成为资源准备就绪后将得到解决的承诺，然后您可以使用 jQuery' s $.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

jQuery 2.1 |延迟函数直到手动加载外部脚本

jQuery 2.1 | Defering function until external scripts are manually loaded

jquery

jquery-deferred

youtube-data-api