javascript - $.when().then() 不适用于嵌套 ajax 调用

Question

我一直在尝试将页面滚动到由 ajax 调用创建的动态 div 。

当点击#divnotifications div(如下)时，我进行第一个ajax调用，添加Post详细信息，然后在这个ajax调用中，进行另一个ajax调用将相关注释添加到 div 中。

到目前为止解释的部分效果很好。然后，我使用 $.when().then() 滚动到基于 ajax 调用创建的 div 项目。但是，页面不会滚动到由 LoadCommentsForPost ajax 调用创建的元素。

我是否理解了 $.when().then() 的逻辑错误？

    $(document).on('click', '#divnotifications div', function (event) {
          event.preventDefault();
          $.ajax({
              //other details
              success: function (postid) {
                  $.when(DisplayPostWithFullDetails(postid)).then(function () {                            
                      //scroll to the content created by 
                      //LoadCommentsForPost function nested 
                      //inside DisplayPostWithFullDetails
                  });
              }
          });                
    });

    function DisplayPostWithFullDetails(postId) {
         $.ajax({
            //other details
            success: function (post) {
                //The code to build the div to display the post -- working fine
                LoadCommentsForPost(post.PostId);                

            }
        });
    }

    function LoadCommentsForPost(postid) {
        $.ajax({
            //other details
            success: function (response) {
                var comments = JSON.parse(response);
                DisplayComments(comments);//builds the div to display the comments - working fine
            }
        });
    }

更新代码

收到一些反馈后，我最终得到了以下代码。然而，它仍然不起作用。仅当我添加一些延迟以确保 div 已加载时它才有效:

    $(document).on('click', '#divnotifications div', function (event) {
        event.preventDefault();
        $.ajax({
            //other ajax stuff
             success: function (postid) {
                  DisplayPostWithFullDetails(postid).done(function () {
                          setTimeout(function () {
                              var scrollto = $("div[data-" + type.toLowerCase() +  "displayform='" + relateditem + "']").offset().top;
                              $("html, body").animate({ scrollTop: scrollto }, 600);
                          }, 500);
                  });
             }
        });
    });

    function DisplayPostWithFullDetails(postId) {
        jQuery.support.cors = true;
        return $.ajax({
            //other ajax stuff
            success: function (post) {
                post = JSON.parse(post);
                //display the post details

                LoadCommentsForPost(post.PostId);
            }
        });
    }

    function LoadCommentsForPost(postid) {
        var promise = new $.Deferred();
        jQuery.support.cors = true;
        $.ajax({
            //other ajax stuff
            success: function (response) {
                var comments = JSON.parse(response);
                DisplayComments(comments);//this is not ajax 

                promise.resolve('loadedcomments');
            }
        });

        return promise;
    }

Answer 1

Did I get the logic of $.when().then() wrong?

是的，如果您想将函数与 $.when 一起使用，您需要从函数中返回一个 promise :

function DisplayPostWithFullDetails(postId) {
     return $.ajax({...
//   ^^^^^^

也就是说，将单个 Promise 包装在 $.when 中是没有用的。

$.when(DisplayPostWithFullDetails(postid)).then(function () {

应该是:

DisplayPostWithFullDetail(postid).then(function () {