jQuery和AJAX：如何处理响应速度过快？

Question

我已经完成了一个网页，必须等待一段时间才能使用它，然后才能获得答案。

当用户单击“ Generate”（复杂的东西）时，我对主div进行了缓慢的slideUp（）处理，此后立即启动“ background” 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的回调之前完成。

Answer 2

这是我最后的工作代码，多亏了adeneo

$(document).ready(function() {
    $('#div-lol-generate-result').hide();
    var sub=function() { return lol_submit(); };
    var lol_submit = function() {
        var data=$('#lol-generate-form').serialize();
        $('#lol-generate-form :input')
            .prop('disabled', 'disabled');
        $('#lol-generate')
            .unbind('click')
            .click(function(e) {
                e.preventDefault();
            });
        $.when(
            $('#div-lol-generate-result').slideUp(4000),
            $('#div-lol-generate-form').slideUp(3000),
            $.ajax({
                url: '/lol/json/story',
                data: data,
                dataType: 'json',
                method: 'POST'
            })
        )
        .then(function(a, b, c) {
            result=c[0];
            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();
        }, function(a, b, c) {
            /* should never happen
             * TODO: hide and all ask refresh
             */
            // a=xhr
            // b='failure'
            // c='Not Found'
        })
        .always(function(result) {
            $('#lol-generate-form :input').removeAttr('disabled');
            $('#lol-generate').click(sub);
            $('#lol-generate-form-input-summoner-name').focus().select();
            $('#div-lol-generate-form').slideDown();
        });
        return false;
    }
    $('#lol-generate-form').submit(sub);
    $('#lol-generate').click(sub);
});