Question

我正在与杰基尔建立一个网站。很多人会在不同的javascript草图上做出贡献，这些草图将随机显示在主页上：其中一些将用P5.js编写，其他一些用其他库编写。

由于我不想在页面加载时加载所有库，因此每个脚本生成一个带有一个对象的JSON：

[
   {
      "title":"Title to display",
      "author":"Author",
      "description":"javascript, Processing",
      "kind":"javascript",
      "href":"link to the js hosted on GitHub Pages",
      "includes":[
         "link to external library hosted on CDN",
         "link to external library hosted on CDN"
      ]
   }
]

然后，使用jQuery，我用这个脚本加载所有内容：

var loadedData;

$(function() {
    // Load all the scripts in an array
    $.getJSON("{{ site.url }}/homepage.json", function(data) {
      loadedData = data;
      randomPost();
    });

    $("#jsRefresh").click(function() {
      $("canvas").remove();
      randomPost();
    });
});

function randomPost() {

  $("#loading").show();

  item = loadedData[Math.floor(Math.random() * loadedData.length)];

  var defer = $.Deferred();

  $.each(item.includes, function(index, value){
    defer.then(function() {
      $.getScript(value)
    });
  });

  defer.then(function() {
    $.getScript(item.href)
  });

  defer.resolve();

  $.when(defer).done(function() {
    $("#loading").hide();
    $(".item-title").html(item.title + ' | ' + item.author);
    $(".item-description").html(item.description);
  })
}

此代码在我的本地服务器上运行，但是当我在GitHub页面上传时，它在页面加载时无法正常加载。

如果我再次单击激活 randomPost（）的刷新链接，则会加载上一个脚本。

实时示例目前已托管here

Answer 1

您的整个$ .when只使用一个承诺并立即解决，而不是基于任何getScript完成。由于您立即解决它，它实际上与完全不使用承诺相同。

另请注意，$.getScript是$.ajax快捷方式，$.ajax本身会返回承诺

这样的规范就是制作一系列承诺，$.when无法解决，直到承诺数组全部解决

类似的东西：

 // library script promises
 var requests = item.includes.map(function(value) {
   return $.getScript(value)
 });
 // `$.when` doesn't accept array in jQuery versions <3
 $.when.apply(null, requests).then(function() {
   //want this to only load after include requests have loaded
   var mainScriptPromise =  $.getScript(item.href);           
    // return it to the next then() 
    return mainScriptPromise;
 }).then(function() {
   // fires after the main script promise resolves
   $("#loading").hide();
   $(".item-title").html(item.title + ' | ' + item.author);
   $(".item-description").html(item.description);
 });

请注意，如果任何承诺无法解决，您还需要添加自己的错误处理

Demo using $.get

请注意，您可能希望使用像Require.js

这样的加载管理器

jQuery.getScript在本地但不在GitHub页面上工作

1 个答案: