javascript - 当ajax请求异步且未按顺序完成时如何保持索引正确

Question

我正在与 Vimeo oembed api 交互以获取视频。我的背景是我有多个事件，每个事件都有一组视频。我通过简单地获取第一组视频而不是加载所有视频来缩短页面加载时间。

该函数接受4个参数，然后获取视频，并将结果返回给调用函数进行加载。视频网址为http://www.vimeo.com/VIDEOID ，索引基于调用函数中的 .each，该函数通过可用 ID 进行迭代，计数是将被调用的视频总数，回调处理返回到调用函数的数据。函数全部完成后，它会调用 showFirstVideo，它会显示我生成的第一个缩略图的视频。

我遇到的问题是，因为 ajax 调用是异步的，所以 indexEq var 会跳转。而不是:0, 1, 2, 3, 4 ...它将是 1,6,3,0...

我需要 indexEq 按顺序递增，以便最后我可以在适当的时间运行 showFirstVideo 函数。

function loadVideo(videoUrl, index, vidsCount, callback) {
    var indexEq = index;
    $.when(
        $.ajax({
            type : "GET",
            url : "http://www.vimeo.com/api/oembed.json",
            data : {"url" : videoUrl },
            dataType : "jsonp",
            success : function(result) {
                index++;
                callback(result);
            },
            error : function(error) {
                var s = "";
                $.each(error, function(name, value){
                    s += name + ": " + value + "\n";
                });
            }
        })
    ).done(function(){
        console.log(indexEq);
        if(indexEq === vidsCount){
            $('.video-thumbs').velocity("fadeIn");
            $('.past-concert-loader').velocity("fadeOut");
            showFirstVideo();

            // RESET INDEX, FOR WHEN WE HAVE TO CALL THIS FUNCTION AGAIN.
            console.log("Trigger indexEq back to 1");
            indexEq = 1;
        }
    });
}

调用该函数的$.each:

$.each(vids, function(i, val){
        var videoUrl = 'http://www.vimeo.com/'+val+'';
        loadVideo(videoUrl, i, vidsLength, function(result){
            $('.video-thumbs').append('<div class="col-xs-6 col-sm-3 video-thumb video-'+i+'" data-video-id="'+ result.video_id +'"><img src="'+ result.thumbnail_url +'" alt="'+ result.title +'" class="img-responsive"></div>');
        });
    });

Answer 1

您可以在此函数之外将indexEq声明为全局变量。每次调用 AJAX 时都会增加 indexEq 值。这将确保您按顺序获取值。