javascript - 使用 jQuery 设置第三方文件请求超时

Question

我正在尝试将第三方托管的脚本文件集成到新网站中。

目前，我正在为文档就绪的第三方脚本文件的 DOM 添加一个 SCRIPT 标签:

$(document).ready( function() {

    var extScript = document.createElement('script');
        extScript.type = 'text/javascript';
        extScript.src = 'http://third-party.com/scriptfile.js';

    $('head').append(extScript);

});

function extScriptCallback() {
    $('#extWidgetContainer').show();
}

但有时第三方脚本文件请求超时或需要很长时间才能响应。

因此，为了最佳实践，如果外部脚本花费的时间比例如10 秒加载。

我如何实现这一目标？我查看了 JavaScript 的 native setTimeout() 以及 jQuery 的 delay() 函数，但我不确定应该使用哪个或如何使用。

感谢任何建议。

Answer 1

有几种方法可以解决这个问题。第一种方法是检查计时器是否存在第三方脚本提供的函数或变量。如果在您检查它时它不可用，则它尚未加载:

$(document).ready( function() {  
    var extScript = document.createElement('script');
        extScript.type = 'text/javascript';
        extScript.src = 'http://third-party.com/scriptfile.js';

    window.setTimeout(function ()
    {
        if ("thirdPartyFuncName" in window)
            alert("loaded");
        else
            alert("Not loaded yet");
    }, 10000); // 10 secs

    $('head').append(extScript);
}); 

另一种方法是调查浏览器提供的 onload 和 onreadystatechange 事件。据我所知，onload 已被广泛实现，因此您可以执行以下操作:

var timer;
extScript.onload = function () { clearTimeout(timer); }
timer = window.setTimeout(function ()
{
    alert("not loaded");
}, 10000); // 10 secs

这种方法的缺点是，即使脚本有语法错误，加载事件也会触发，所以我仍然认为第一种方法是最好的选择，因为它会检查功能是否存在。