javascript - jQuery 和 AJAX : how to deal with too fast responses?

Question

我做了一个网页，必须让用户在得到答案之前等待很长时间。

当用户点击“生成”(复杂的东西)时，我对主 div 执行缓慢的 slideUp() 操作，然后立即启动我的“后台”AJAX 调用:

$('#div-lol-generate-result').slideUp(4000);
$('#div-lol-generate-form').slideUp(3000);
$.ajax({
    url: '/long/api/call/that/takes/between/1/and/10/seconds',
    data: data,
    dataType: 'json',
    method: 'POST'
})
.done(function(result) {
    console.log('ok :');
    console.log(result);
    var monp=$('<p />');
    if (typeof(result.error)!='undefined') {
        for (var i in result.error) {
            monp.append(result.error[i]);
            monp.append('<br />');
        }
    } else if (typeof(result.story)!='undefined') {
        console.log(result.story.length);
        for (var i in result.story) {
            monp.append(result.story[i]);
            monp.append('<br />');
        }
    }
    monp.last().remove();
    $('#div-lol-generate-result').empty().append(monp).slideDown();
    });
})
.error(function(result) {
    console.log('Erreur :');
    console.log(result);
})".

一切正常...仅当答案花费的时间比“隐藏”动画长时。如果回答很快，我们可以看到 maindiv 的内容被替换了。

你是怎么处理的？

Answer 1

在替换内容之前确保动画和 ajax 调用都已完成

var promise1 = $('#maindiv').slideUp(4000).promise();

var promise2 = $.ajax({
                   url      : '/complexstuff',
                   data     : data,
                   dataType : 'json',
                   method   : 'POST'
               });

$.when.apply($, [promise1, promise2]).done(function(elem, data) {
    $('#maindiv').html(data.result).slideDown();
});

通过这种方式，ajax 调用会立即开始，而无需等待回调，并且 promise 会确保在调用 $.when 的回调之前两者都已完成。