javascript - 如何使用 jQuery 等待动画链和 ajax 调用完成？

Question

我对 jQuery 的 Promise 和 Deferred 方面感到非常困惑。我正在尝试等待两个连续动画链中的第二个动画以及 ajax 调用完成，然后再执行其他操作(显示 ajax 调用的结果)。

如果只是一个动画，甚至是一堆同时发生的动画，我知道我可以这样做:

var animPromise = $('#el').fadeIn().promise();
var ajaxPromise = $.ajax({...}).promise();
$.when(animPromise, ajaxPromise).done(function() {...});

或者...

var animPromises = $('.elements').fadeIn().promise();
var ajaxPromise = $.ajax({...}).promise();
$.when(animPromises, ajaxPromise).done(function() {...});

...但我不明白如何在不触发它的情况下获得对最后一个动画的 promise ，例如

$('#underlay').fadeIn(function() {
    $('#dialog').fadeIn(); // I need a promise for this
});
var ajaxPromise = $.ajax({...}).promise();

ajax 调用和#dialog 或多或少都有可能先完成。所以基本上，我不想在对话框动画完成之前将我的 ajax 响应加载到对话框中，但我希望在动画运行时获得启动 ajax 请求的好处。

我仅限于 jQuery 1.6

最初尝试此解决方案后，我在调用 promise() 时得到一个空指针:

var ajaxTask = null;
$('#underlay').fadeIn({
    duration: 200,
    start: function() {
        ajaxTask = $.ajax(ajaxOptions);
    },
    complete: function() {
        $('#dialog').fadeIn(300, function() {
            ajaxTask.promise().then(function() {
                callback( JSON.parse(ajaxTask.responseText) );
            });
        });
    }
});

现在可以正常工作了，如下所示:

var ajaxTask = $.ajax(ajaxOptions);
var ajaxPromise = ajaxTask.promise();

$('#underlay').fadeIn(200, function() {
    $('#dialog').fadeIn(300, function() {
        ajaxPromise.then(function() {
            callback( JSON.parse(ajaxTask.responseText) );
        });
    });
});

...但我担心上面第一个示例中的空指针。在第二个工作示例中，是否仍有可能 ajaxPromise 在到达 then 时未初始化或发生其他情况？

或者它是安全的，因为对 promise() 的调用是同步的，并且 ajaxTask 和 ajaxPromise 对象保证在动画开始？

Answer 1

Both the ajax call and the #dialog are more or less equally likely to finish first. So basically, I don't want to load my ajax response into the dialog until the dialog animation has completed, but I want the benefit of kicking off the ajax request while the animation is running.

尝试使用 #underlay 处的 start 函数调用 #underlay 处的 $.ajax() complete 调用 #dialog .fadeIn() ，位于 #dialog .fadeIn() done 处理 $.ajax() 响应

var ajaxPromise;
$("#underlay").fadeIn({  
  // called when `#underlay` `.fadeIn()` starts
  start: function() {
    // start asynchronous process
    ajaxPromise = $.Deferred(function(d) {
      setTimeout(function() {
        d.resolve("complete")
      }, Math.random() * 2000)
    }).promise();
  },
  complete: function() {
    $("#dialog").fadeIn({
      // called when `#dialog` `.fadeIn()` animation completes
      done: function() {
        // `this` : `#dialog`
        el = $(this);
        // process asynchronous result
        ajaxPromise.then(function(data) {
          // do stuff with ajax response
          el.after(data)                
          }
          // handle ajax errors
          , function err(err) {
            console.log(err)
          })
      }
    }); // I need a promise for this
  }
});

#underlay,
#dialog {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="underlay">underlay</div>
<div id="dialog">dialog</div>