Javascript 异步加载库时如何处理依赖关系？

GooglePageSpeed说我应该异步加载我的JS文件，但这给我的许多页面带来了一个问题，即使用库和插件的代码

例如，我在一个页面上有以下代码：

$(document).ready(function () {
    var hound = new Bloodhound({ .......
});

因此，当页面加载时，我正在创建一个Twitter侦探（与Typeahead一起使用）对象。问题是，如果同步加载了Brandhound和Typeahead，则会抛出一个错误：

Uncaught ReferenceError: Bloodhound is not defined 

这是因为这些脚本尚未加载

我提出了这个解决方案：

$(document).ready(function () {
    createBloodhound();
});


function createBloodhound() {
    if (typeof Bloodhound != "undefined") { // if bloodhound JS has loaded
        var hound = new Bloodhound({ .......
    }
    else {
        setTimeout(function(){
            createBloodhound();
        }, 10);
    }
}

这是一个好的做法，还是有更好的方法

---

注意：我意识到有像RequireJS这样的库在加载文件时处理依赖关系，但我认为这种类型的解决方案在我的情况下不会起作用，因为我在包装文件中异步加载库（因为每个页面都需要它们）。这里的示例代码不会出现在每个页面上，而是只出现在我的网站的特定页面上。

最好的方法是使用回调机制，您可以对其做出反应，而不是使用轮询机制。我使用了，它简单但功能强大，并提供回调机制

---

没有这些，你可以自己实现一些东西。不过在性能方面，使用回调更好。

根据站点的复杂性，不同的选项可能是最好的。如果

所有javascript都在JS文件中

在加载JS之前和之后，上面的内容看起来完全相同（或者非常接近，以至于加载JS时的更改不会分散用户的注意力）

总文件大小很小（或者每个人每次访问您的站点时都会访问的页面上需要您的大部分JS）

。。。然后将它们合并到一个文件中，并只使用服务器，而不是所有单独的文件。那么你就不必担心依赖性了。将该脚本文件包含在body标记的底部（不需要异步或延迟属性，但如果需要，可以使用它们）

如果需要使用一些javascript来使上述内容看起来正确，请执行相同的操作，只需将JS拆分为两个文件。一个文件只包含使上述折叠内容看起来正确所需的内容，另一个文件包含其他所有内容。在头标签中包含第一个标签（可能是内联标签），在身体标签底部包含第二个标签。如果第二个依赖于第一个标记，则不要使用async属性，因为它可能首先执行

如果您有一些只在某些页面上使用的大型JS文件，并且这些文件依赖于其他JS文件，请将脚本粘贴在body标记的底部，并使用defer属性

如果将javascript与HTML混合在一起，可以使用回调机制（如），也可以像Google Analytics那样构建执行队列，外部脚本知道在首次加载时要查找这些队列