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的本机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事件。 AFAIK，onload已广泛实施，因此您可以执行以下操作：

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

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

使用jQuery在第三方文件请求上设置超时

1 个答案: