如何在频繁调用带有ajax请求的函数时，在处理下一个请求之前等待最后一个ajax请求完成？

12 浏览
0 Comments

如何在频繁调用带有ajax请求的函数时，在处理下一个请求之前等待最后一个ajax请求完成？

我在我的代码中有一个ajax请求，如下所示：

function show_detail()
{
     $('#product_'+index).html(' 加载中...');
    $.ajax({
        type: "GET",
        url: "someUrl",
        data: dataString,
        success: function(msg){
            $('#product_'+index).html(msg);
        }
    });
}

我的要求是，在一组产品图片中点击任何一个产品图片时调用show_detail()函数，并在一个div中显示加载图片，直到产品的详细信息从ajax请求完全加载。当从ajax请求加载产品详细信息时，我必须用产品详细信息覆盖同一div。但问题是，当同时点击多个链接时，我会得到多个加载图片的相应div。

因此，我希望在连续调用相同函数（show_detail()）时等待最后一个ajax请求完成，并一次只显示一个加载图片。另外，我不想用async:false冻结浏览器。

提前致谢。

0

1 答案

0 Comments

问题的原因是，当频繁调用一个带有ajax请求的函数时，需要等待上一个ajax请求完成后再处理下一个请求。解决方法是使用jQuery的`when()`函数来执行回调函数，该函数可以基于一个或多个对象（通常是表示异步事件的Deferred对象）来执行回调函数。下面是一个简单的示例：

var req1 = $.ajax({...});
var req2 = $.ajax({...});
var req3 = $.ajax({...});
$.when( req1, req2, req3 ).done(function(){
    console.log("all done");
});

以上代码中，我们使用`$.ajax()`函数发送了三个不同的ajax请求，并使用`when()`函数来等待这三个请求都完成后执行回调函数。

更多关于`when()`函数的信息，请查看[此链接](http://api.jquery.com/jquery.when/)。

谢谢。但是我只有一个ajax调用的代码。在连续的函数调用中，同一段代码会被执行多次。我希望执行所有的请求，但是要等待上一个请求完成后再处理下一个请求。

0