javascript - 是否可以让 Head JS 的 ready() 函数等待两个脚本？

Question

我在我的网页上加载了三个脚本，我想在其中两个完成加载后触发一个函数。

 head.js(
     { webfont: 'http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js' },
     { jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
     { analytics: 'http://www.google-analytics.com/ga.js' }
 );

理想情况下，我希望能够执行以下操作，但根据 documentation，让 head.ready() 等待两个脚本加载似乎是不可能的。 (请参阅脚本组织)。

head.ready('jquery', function() {
    // Code that requires jQuery.
});

// This is not supported. :-(
head.ready('jquery', 'analytics', function() {
    // Code that requires both jQuery and Google Analytics.
    // ...
});

那我应该怎么解决呢？如果我嵌套就绪方法，我可以确定我的代码会被触发，还是只有当 jquery 在分析之前完成加载时才会被触发？

head.ready('jquery', function() {
   // Code that requires jQuery.
   // ...
   head.ready('analytics', function() {
       // Code that requires both jQuery and Google Analytics.
       // ...
   });
});

另一种解决方案可能是将加载语句分成两部分，如下所示。但是我是否仍会从脚本的异步加载中充分受益，还是它会在 jquery 和分析之前完成加载 webfont？

 head.js(
     { webfont: 'http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js' }
 );

 head.js(
     { jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
     { analytics: 'http://www.google-analytics.com/ga.js' },
     function() {
         // Code that requires both jQuery and Google Analytics.
         // ...
     }
 );

 head.ready('jquery', function() {
     // Code that requires jQuery.
     // ...
 });

Answer 1

由于脚本是按顺序执行的(即使是并行加载的)，您可以等待“最后一行”的脚本

head.js(
    { webfont  : 'http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js' },
    { jquery   : 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' },
    { analytics: 'http://www.google-analytics.com/ga.js' }
);

 head.ready('analytics', function() {
    // when this triggers, webfont & jquery will have finished loading too
 });