使用 .promise() 先启动 Ajax 请求？答案

【问题标题】：Using .promise() to have the Ajax request start first?使用 .promise() 先启动 Ajax 请求？
【发布时间】：2015-01-10 12:17:31
【问题描述】：

我被建议在这个函数中使用.promise()，因为就像现在一样，Ajax 调用在加载动画完成之前不会开始。我通读了法典，但无法真正理解如何实现它。谁能告诉我它是怎么做的？

    function projectShow() {
        $('#loading-animation').show(100, function() {
            $.ajax({
                type: 'POST',
                cache: false,
                url: ajaxURL,
                data: {'action': 'load-content', post_id: post_id },
                success: function(response) {
                    $('#project-container').slideDown('fast').html(response);
                    $('#loading-animation').hide();
                return false;
                }
            });
        });
    }

【问题讨论】：

问题不清楚。 “谁能告诉我它是怎么做的？” - - 什么”？从技术上讲，使用success 回调和承诺没有区别。
我只是不确定如何使用 jQuery 的.promise()。但是，如果没有区别，那么我想我不必担心。谢谢。
“在加载动画完成之前，Ajax 调用不会开始”。所以呢？你希望发生什么？
@chiliNUT 我想先启动 Ajax 请求。

标签： javascript jquery ajax promise

【解决方案1】：

可能给出了使用.promise() 的建议，因为您的代码在进行 AJAX 调用之前会强制延迟 100 毫秒（当动画运行完成时）。进行 AJAX 调用，然后在等待响应时启动动画可能更有意义。

我已经修改了您的代码，只需在开始动画之前进行 AJAX 调用即可实现此目的。（jQuery.ajax() 默认在内部使用.promise()。有关更多信息，请参阅async 选项。）请注意，如果 AJAX 调用在 100 毫秒内返回，则 JavaScript 的执行顺序可能会改变。这可能会导致不良的副作用，但我认为在您的情况下是可以的。

function projectShow() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').slideDown('fast').html(response);
            $('#loading-animation').hide();
        return false;
        }
    });
    $('#loading-animation').show(100);
}

【讨论】：

“请注意，如果 AJAX 调用在 100 毫秒内返回，则 JavaScript 的执行顺序可能会改变。” - - 它不可能是。 JS 是单线程的
@zerkms：JS 是单线程的，但是有一个执行队列。想象一下 AJAX 调用只需要 50 毫秒。原始代码会先调用$('#loading-animation').show(100);，然后是$('#loading-animation').hide(); 我建议的代码会先调用$('#loading-animation').hide();，然后是$('#loading-animation').show(100);
不。 $('#loading-animation').show(100); 是保证在之前 ajax 回调调用（即使ajax 调用需要0 毫秒）
@zerkms：好吧，那是个坏例子。但是如果你添加一个complete 回调：$('#loading-animation').show(100, complete); 呢？ AJAX success 和 complete 回调的调用顺序会不同，不是吗？
那么 - 是的，它会有所不同。