これらの2つの関数を同期的に呼び出すことはできません

Question

関数を同期的に調べてみましたが、実際には機能していないようです。私は外部のハンドルバーのテンプレートを使用して、データでロードされた '親' html要素を生成しています。その後、ロードした後、独自のデータで作成した '子'テンプレートからhtmlを追加します。どちらの関数呼び出しも同じ関数を呼び出しますが、異なるテンプレート/データを渡すだけです。以下は私がこれを持っているコードです - どんな助けもありがとうございます。ありがとう！

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

あなたのコードで複数の問題があります。

1. あなたがあなた自身の約束を作成する必要はありません
2. あなたの繰延を解決していない - あなたはむしろあなたが既に持っている約束を返すことができますが、使用よりもthe promise anti-pattern
3. あなたは、他の約束のものを正しく実行していれば、あなたのコードが約束を待っていなくても間違っていると言っています。あなたが既に持っている
   1. 戻る約束をではなく、新規のDeferredを作成します。

      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') 
      }); 
      

      変更：

   私はこれをお勧めしたいです。約束のアンチパターンを避けてください。

4. ajax呼び出しに約束を使用します。
5. チェーンloadSimpleCollection()の中にあなた2つの非同期操作はそう、彼らは一緒にリンクされ、両方が、それはすぐに実行されず、後から呼び出すことができるよう
6. が.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)); 
    }); 
});