Question

我有以下代码，其中每个Image都进行ajax调用。但是我的问题就像当它为第一个图像进行ajax调用时，在那个时候没有等待它会调用第二个。所以它没有得到第一次调用的效果，意味着我错过了第一个调用效果。类似的，没有等待第二，它是inovking为第三，...

那么如何在响应来之前等待每个函数的上方？

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();

Answer 2

您可以通过将async: false添加到ajax参数来使其同步。然后你可以一个接一个地打电话给他们。

或者，如果你想要更多的灵活性，将ajax调用放入一个函数，传入图像加载。然后在ajax调用的“success”方法中，再次调用该函数，传入下一个图像名称。您需要某种图像名称列表，以便递归调用可以计算下一个要传入的图像。

Answer 3

在每次ajax成功回调之后，将一些$(".openSubmenuOnHover").hover( function () { $(".sub-navbar > ul").each(function (){ $(thisdiv).collapse("hide"); } var thisdiv = $(this).attr("data-target"); $(thisdiv).collapse("show"); //$(thisdiv).show("slow");//("show"); }, null ); $(".containerOf-openSubmenuOnHover").hover( null, function () { var thisdiv = $(".openSubmenuOnHover").attr("data-target"); $(thisdiv).collapse("hide"); //$(thisdiv).hide();//("hide"); } );属性设置为已加载的元素并再次调用相同的函数。

试试这个：

data-*

如何等待检查ajax请求是否已经完成其他元素？

3 个答案: