问题

Question

我有一个页面可以通过defer加载一些外部脚本：

 <script src="externalPlugin.js" defer></script>

然后我在jquery.ready中有一些代码可以调用该脚本中的内容

$(function() {
    $.externalPlugin();
});

到目前为止，它的工作效率高达99.9％。

问题

如果用户离开页面（点击“刷新”，或者只是快速导航到另一个页面），则在externalScript仍在加载/执行-jQuery.ready仍然被称为（！），显然会引发以下错误：$.externalPlugin is not a function或类似错误。

我该如何应对？

我尝试添加一个beforeunload处理程序以删除ready绑定

window.addEventListener("beforeunload",function() { $(document).unbind("ready"); });

但这不起作用。

这不是一个大问题（毕竟用户正在导航，所以他不在乎任何错误），但这仍然是有趣的行为。

更新

是的，我知道我可以等待定义，甚至可以使用<script defer onload='whatever()'>，但我想知道是否存在一种“全局”方法来普遍解决此问题-通过以下方法不调用.ready：页面正在卸载 ...如果没有，我想说这实际上是必须向jQuery团队报告的错误，是吗？

Answer 1

如果必须在准备好dom的情况下在主页上启动脚本，请删除脚本的defer属性：

 <script src="externalPlugin.js"></script>

您可以等待définition函数：

function wait(fn, delay)
{
    var i = setInterval(function(){

        if(fn() && typeof fn() == "function")
        {
            clearInterval(i);
            fn()();
        }
    }, delay);
}

$(document).ready(function(){
    wait(function(){ return $.externalPlugin }, 100);
});

Answer 2

等待脚本加载

$(function() {
    waitPlugin();
});

function waitPlugin(){
    if( $.externalPlugin == null  ) {
        setTimeout(waitPlugin,1000);
        return;
    }
    $.externalPlugin();
}

但是我会以某种方式重新组织代码。

jQuery.Ready在卸载过程中触发-有什么方法可以防止这种情况发生？

问题

2 个答案: