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＆＃39; 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 |延迟功能，直到手动加载外部脚本

1 个答案: