javascript - 如何等待检查ajax请求在其他元素之前完成？

Question

我有以下代码，其中每个图像都会进行 ajax 调用。但我的问题是，当它对第一个图像进行ajax调用时，当时无需等待它就调用第二个图像的响应。所以它没有获得第一个调用的效果，意味着我错过了第一个调用的效果。相似，无需等待第二个，它就可以调用第三个，...

那么如何在每个函数上面等待直到响应到来？

jQuery('.xxx img[src*="mainimage"]').each(function () {
        vobj = $(this);
        var inmainurl = 'https://xxx.kki/api/oembed.json?url=' + $(this).attr('src');
        $.ajax({
            url: inmainurl,
            dataType: 'json',
            success: function (result) {


                $(vobj).attr('src',result.thumbnail_url);

            }
        });


    });

Answer 1

出于这些目的，您应该使用递归函数。基本示例(jsFiddle):

var myMethod = function(index){
    var total_images = $('img').length;
    if( index == total_images ) return; // job finished
    var current_image = index || 0;
    $.ajax({
        /*...*/
        success: function(/*...*/){
            /*...*/
            myMethod(current_image + 1);
        }
    });
};

myMethod();