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

我试图将数据添加到动态模态。一旦数据被添加到模型中，模态应该只能被看到。我试图使用$.when(Ss.pieceInfo(piece)).then(Ss.showInfo());行来实现这一目标，但似乎两个函数都在同一时间执行。什么在AJAX完成对象文字后执行函数

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

来源

2017-09-15 CalAlt

尝试在您的方法中添加一个稍微超时以更新模态。这样你就可以看到它们是否在同一时间实际执行。 – inoabrian

那是因为你没有在Ss.pieceInfo()方法返回的承诺，使其可以立即解决。 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); 
     }) 
    }); 
},

来源

2017-09-15 13:07:14 Terry

感谢您花时间回答，我已经意识到我想在数据被绘制到屏幕后执行'Ss.showInfo（）'。 – CalAlt

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

回答

相关问题