AJAX完全オブジェクトリテラルの後に関数を実行

Question

私は動的なモーダルにデータを追加しようとしています。モーダルは、データがモデルに追加された後にのみ表示されます。私は$.when(Ss.pieceInfo(piece)).then(Ss.showInfo());行を使用してこれを達成しようとしましたが、両方の機能が同時に実行されているようです。あなたはそれが瞬時に解決させる、Ss.pieceInfo()方法で約束を返すされていないためであることは何

var Ss = { 
    $modal: $('#piece-modal'), 
    $title: $('.piece-title'), 
    $artist: $('.piece-artist'), 
    $info: $('.piece-info'), 


    init: function() { 
     this.bindEvents(); 
    }, 

    bindEvents: function() { 
     $('.piece').on("click", function(e) { 
      e.preventDefault(); 
      var piece = $(this).data('slug'); 

     //This doesn't seem to have any effect 
      $.when(Ss.pieceInfo(piece)).then(Ss.showInfo()); 
     }); 
    }, 

    pieceInfo: function(piece) { 
     console.log(piece); 
     $.getJSON(Kirby.baseUrl + '/api/v1/work/' + piece, function(data) { 

      $.each(data, function(key, val) { 
       Ss.$title.html(val.title); 
       Ss.$artist.html(val.artist); 
       Ss.$info.html(val.text); 
      }) 
     }); 
    }, 

    showInfo: function() { 
     var height = $('.primary-info').height(); 
     console.log(height) 
     Ss.$modal.addClass('modal-active') 
     Ss.$modal.css('transform','translate3D(0, calc(100% - '+ height +'px), 0)'); 
    }, 
}; 

$(document).ready(function(){ 
    Ss.init(); 
}); 

Answer 1

。 As per the documentation for $.when()：

単一の引数がjQuery.when()に渡され、それが延期または約束されていない、それが解決繰延と接続されているすべてのdoneCallbacksがすぐに実行されるように扱われます場合。

これを行うには、その方法を少ししか変更しないでください：$.getJSON約束を返してください。

pieceInfo: function(piece) { 
    return $.getJSON(Kirby.baseUrl + '/api/v1/work/' + piece, function(data) { 

     $.each(data, function(key, val) { 
      Ss.$title.html(val.title); 
      Ss.$artist.html(val.artist); 
      Ss.$info.html(val.text); 
     }) 
    }); 
},