ajax - jQuery .always() 似乎在 $.get() 请求实际完成之前触发

Question

这可能是我对 AJAX 功能的误解，但我遇到了调用 $.get 回调 (.always()) 的情况在 GET 请求实际完成之前。至少，看起来是这样的。

代码

var apiRequest  = 'some/url/';

// fetch list of video embed codes
$.get( apiRequest, function( embed_codes ) {

    // added this per Explosion Pills' answer
    var jqxhrs = [];

    // for each embed code, get video details (name, duration, etc.)
    for ( var i = 0; i < embed_codes.length; i++ ) {
        var videoDetailsRequest = '/v2/assets/' + embed_codes[i];
        //..declare vars..

        // fetch video details
        var jqxhr = $.get( videoDetailsRequest, function( video ) {
            // build playlist entry for each video
            playlistItem = '<li><h3>' + video.name + '</h3><p>' + video.description + '</p></li>';

            // create object of video HTML, with key = "video name" for sorting later
            videoArray[video.name] = playlistItem;
        }, 'jsonp' )

        // added this per Explosion Pills' answer
        jqxhrs.push( jqxhr );
    }

    // updated from jqxhr.always( function() {
    $.when( jqxhrs ).always( function() {
        // create array of keys
        for ( k in videoArray ) {
            if ( videoArray.hasOwnProperty( k ) ) { keys.push( k ); }
        }

        // append alphabetized list of videos to the page...
    });
}, 'jsonp' );

代码的作用

本质上，该代码执行以下操作:循环遍历视频嵌入代码列表。对于 for 循环的每次迭代，获取每个视频的详细信息并将这些详细信息推送到多维数组中。获取所有视频后，调用 .always() 回调，该回调会将视频排序到按字母顺序排列的播放列表中并附加到页面。

问题

.always() 回调有时会在所有视频被获取之前被调用。播放列表中有 9 个视频，但有时在回调触发之前只返回 6 或 7 个视频，这意味着我的播放列表有点短。我通过alert()键的数量并使用控制台对此进行了测试。我看到的是 6-7 个视频将返回，然后回调中的 alert() 触发，然后剩余的视频是返回。

我的问题:

为什么会发生这种情况？我认为 .always() 回调在 AJAX 请求完成后触发。这是否意味着所有视频都应该在回调被触发之前返回？我怀疑这与 AJAX 中的“A”有关，但我认为 always() 回调的目的是解决这个问题。任何有助于我理解的内容都将不胜感激。谢谢!

Answer 1

按照您的设置方式，一旦循环中的最后 ajax 请求完成，.always 回调就会触发。相对于其他情况，这可能会发生困惑。我无法判断您是否希望它在循环中的所有请求完成时或外部请求完成时触发。

对于外部请求，很简单。只需链接对 .always(或 .done，我相信它们是相同的，后者是首选)的调用。

如果您希望它在所有其他 ajax 请求完成时完成，您可以使用 $.when，它检查所有延迟对象何时完成:

var jqxhrs = [];
   ...for loop...
   var jqxhr = $.get( videoDetailsRequest
   ...
   }, 'jsonp');
   jqxhrs.push(jqxhr);
...
$.when.apply(undefined, jqxhrs).always(function () { /* your intended callback */

<小时/>

或者，您可以使用.pipe:

//Create initial deferred object
var jqxhr = $.Deferred();
   ...for loop...
   jqxhr = jqxhr.pipe($.get(...
jqxhr.always(function () { /* callback */