Question

我做了一个网页，必须等待一段时间才能得到答案。

当用户点击“Generate”（复杂的东西）时，我会对主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调用就可以立即启动而无需等待回调，并且promises会确保在调用$.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);
});

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

2 个答案: