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

Posted 2023-02-24

【中文标题】jQuery 2.1 |延迟功能直到手动加载外部脚本

【英文标题】：jQuery 2.1 | Defering function until external scripts are manually loaded

【发布时间】：2015-03-30 03:04:14

【问题描述】：

这是我的困境：浏览器硬刷新会清空浏览器缓存，而当互联网连接丢失时发生这种情况，当互联网连接恢复时我无法使用我的应用程序。因此，我想通过一个按钮手动（无缝）重新加载 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>

【问题讨论】：

除非我遗漏了一些明显的东西，否则问题的整个基础似乎是错误的。 “浏览器硬刷新清空浏览器缓存......” - 你确定吗？它不应该。 “......当互联网连接丢失时发生这种情况时，当互联网连接恢复时我无法使用我的应用程序” - 什么，即使在另一次硬刷新之后也不行？如果场景是真实的，那么应用程序将如何启动？数以千计的其他应用如何从连接失败中恢复？

@Roamer-1888 硬刷新 (Ctrl-F5)。如果这样做时网络连接失败（全局或来自特定服务器）并且我的 Youtube 资源没有成功加载，那么我的应用程序将能够在本地工作，但即使在 Youtube 服务器恢复后也无法获取外部 Youtube 数据由于缺少加载的资源（API、脚本等）。因此，首选手动下载缺少的 Youtube 脚本的按钮，而不是另一个硬刷新（这将丢失我的本地数据）。

【参考方案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

【讨论】：

正是我所需要的，每个事件都有自定义函数来启动！我会花时间访问这些参考资料，谢谢您的大力帮助！