无法让这两个函数同步调用

Question

我查看并尝试了几个同步调用函数的示例，但它似乎对我不起作用。我正在使用外部车把模板生成一个加载了数据的 'parent' html 元素，然后在加载之后，我想从 'child' 添加 html我创建的模板（使用它们自己的数据）。两个函数调用调用相同的函数，只是传入不同的templates/data。下面是我为此编写的代码 - 任何帮助表示赞赏。谢谢！

var loadSimpleCollection = function(templateFile, dataFile, containerSelector) {

  var deferred = $.Deferred();

  $.get(templateFile, function(text) {

    // Extract HTML from the template file
    var raw_template = text;

    // Compile that into an handlebars template
    var template = Handlebars.compile(raw_template);

    // Retrieve the container where the data will be displayed
    var container = $(containerSelector);

    // Fetch collection data from JSON file
    $.getJSON(dataFile, function(data, status, xhr) {
      $.each(data,function(index,element){
        var html = template(element);
        container.append(html);
      });
    });

  });

    return deferred.promise();

}

loadSimpleCollection('template1.hbs', 'data1.json', '#parent-div').then(loadSimpleCollection('template1.hbs', 'data2.json', '#child-div'));

Answer 1

您的代码存在多个问题：

你永远不会解决你的延迟
无需创建自己的承诺 - 您可以 return 已有的承诺，而不是使用 the promise anti-pattern
你调用 .then() 错误，如果你正确地执行了其他承诺，你的代码甚至不会等待承诺。

我建议这样做：

var loadSimpleCollection = function(templateFile, dataFile, containerSelector) {

  return $.get(templateFile).then(function(text) {

    // Compile that into an handlebars template
    var template = Handlebars.compile(text);

    // Retrieve the container where the data will be displayed
    var container = $(containerSelector);

    // Fetch collection data from JSON file
    return $.getJSON(dataFile).then(function(data, status, xhr) {
      $.each(data,function(index,element){
        var html = template(element);
        container.append(html);
      });
      return container;
    });

  });

}

loadSimpleCollection('template1.hbs', 'data1.json', '#parent-div').then(function() {
    loadSimpleCollection('template1.hbs', 'data2.json', '#child-div')
});

变化：

Return 您已经拥有的承诺，而不是创建新的延期承诺。避免 promise 反模式。
为您的 ajax 调用使用承诺。
将你的两个异步操作链接到 loadSimpleCollection() 中，这样它们就会链接在一起，调用者可以知道两者何时完成
将函数引用传递给 .then() 以便稍后调用，而不是立即执行。

尽管如此，加载和编译相同的 template1.hbs 两次似乎很奇怪。您当然可以加载一次，编译它，然后将它用于多个其他操作。

您可能会像这样使代码运行更快：

var p1 = $.get('template1.hbs');
var p2 = $.getJSON('data1.json');
var p3 = $.getJSON('data2.json');
$.when(p1, p2, p3).then(function(t, d1, d2) {
    var template = Handlebars.compile(t[0]);
    var container = $('#parent-div');
    $.each(d1[0], function(index, element) {
        container.append(template(element));
    });
    container = $('#child-div');
    $.each(d2[0], function(index, element) {
        container.append(template(element));
    });
});

无法让这两个函数同步调用

Can't get these two functions to call synchronously

jquery

function

handlebars.js

synchronous

deferred