每个循环内的Jquery ajax调用答案

【问题标题】：Jquery ajax call within an each loop每个循环内的Jquery ajax调用
【发布时间】：2011-03-15 07:58:48
【问题描述】：

同时使用 jquery .each() 和 .ajax() 函数时遇到问题。我正在使用 .each() 循环 5 个元素，并为每个元素执行 .ajax() 调用。我的问题是，我只希望在收到每个 ajax 请求的响应后循环继续。目前，所有 5 个元素都在循环，发出 5 个 ajax 请求，然后返回 5 个响应。

她的一个简单例子：

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

         // I would like the each() loop to pause until this is hit, 
         // and some additional logic can be performed. 

       }
     });

});

干杯。

【问题讨论】：

标签： jquery each

【解决方案1】：

您可以为此使用async 选项使每个请求同步（= 暂停脚本执行直到每个请求完成）：

异步默认情况下，所有请求都是异步发送的（即默认设置为 true）。如果您需要同步请求，请将此选项设置为 false。跨域请求和 dataType: "jsonp" 请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

但是，正如文档已经说过的，这是非常不鼓励的，因为如果请求挂起或超时，它可能会冻结浏览器。

如果可能的话，最好以可以使用经典回调函数的方式更改代码的架构。

【讨论】：

为您的帮助干杯，我已经接受了您的建议并更改了我的代码结构，我已经删除了循环并改用递归。现在工作正常。

【解决方案2】：

Pekka 有正确的答案。你只需要编辑你的脚本如下。

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       async: false,
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

       }
     });

});

【讨论】：

我已经尝试过了，我明白为什么它非常不鼓励。似乎将此设置为 false 会导致我的浏览器冻结，直到收到所有响应并且循环完成。
我不确定您期望发生什么。如果您希望脚本暂停并等待响应，那么它将完全暂停并等待。也许你应该解释你想要完成的究竟是什么，因为可能有更好的方法。使用不同的算法可能有更好的方法来实现您想要的最终结果。

【解决方案3】：

我很高兴地说有一种方法......但它有点讨厌。

如果您确定请求必须返回某些内容，那么您可以删除“tryIteration”部分。

$(document).ready(function() {

        loop(".buttonsPromotion", 0);

});

function loop(elements, tryIteration) {
//HOW MANY TRIES UNTIL WE STOP CHECKING
if(tryIteration<7){

    $(elements).each(function() {            
        var actuel = $(this);
        $.ajax({
           url: "write your link here",
           data: {},
           dataType: 'json',
           async: true,
           success: function(data){
               //HERE WE KNOW THE AJAX REQUEST WENT OK
               actuel.addClass('AjaxOK');    
           },
           error:function(thrownError){
                console.log(thrownError);
                //WE MAKE ANOTHER EACH ON ALL ELEMENT THAT WENT BAD
                var elemToRetry = actuel.not('AjaxOK');
                loop(elemToRetry, ++tryIteration);
            }
         });

    });
}
}

【讨论】：

当第一个 ajax 请求返回成功时，为什么不直接跳出 each 循环？

【解决方案4】：

您可以使用jquery defered 和promise 函数来检查异步调用是否成功。 http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

【讨论】：

【解决方案5】：

虽然已经很晚了，但我为此使用了解决方法我创建了一个函数来通过传递元素来处理 ajax 请求

function ajax_request(element){
    var id = element.find('.txtId').val();
    console.log(id);
    $.ajax({
        type: "POST",
        url: "/Handlers/Handler.ashx",
        data: "ID=" + id,
        success: function(xml){
            console.log(xml);
        }
     });
}

$(".element").each(function() {
    // run the ajax function for current element
    ajax_request($(this));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
    <input class="txtId" value="textid1"/>
</div>
<div class="element">
    <input class="txtId" value="textid2"/>
</div>
<div class="element">
    <input class="txtId" value="textid3"/>
</div>

希望它可以帮助任何做类似事情的人

【讨论】：