在AJAX完成对象文字后执行函数

Question

I'm trying to add data to a dynamic modal. The modal should only come into view once the data has been added to the model. I have tried to achieve this using the line $.when(Ss.pieceInfo(piece)).then(Ss.showInfo()); but it seems both functions are executing at the same time. What

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

That is because you are not returning the promise in the Ss.pieceInfo() method, causing it to be resolved instantly. As per the documentation for $.when() :

If a single argument is passed to jQuery.when() and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately.

To do that, you will have to change that method only very slightly: return the $.getJSON promise.

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