jQuery等待直到循环中具有Ajax调用的函数完成-单击按钮后刷新

Question

我在jquery中的按钮单击事件中有一些代码。 它会将所有单选按钮保存在aspx页面中，并将根据其单击状态在它们之间循环，并使用ajax调用（对c＃中的函数的确将其再次传递到Web服务）进行逐一保存。

现在，我想在保存事件后调用页面刷新功能。 但是，当我调用该事件时，页面将刷新，然后进行所有保存，并且只有少数单击的按钮处于新的选中状态，而其他按钮仍根据其旧状态加载。

因此，我该如何等到所有保存完成后再调用刷新函数...我尝试了jquery when和trigger并尝试了其他一些方法，但似乎无济于事。

 $('#btnsubmit').click(function() { 
        $('.radioControl:radio:checked').each(function(e, i) {  
            .............      
           commentsAjax.doAjax(...);  //function 
        });   
       refresh();
    });  
 commentsAjax = { 
    doAjax: function(....) { 
        ................
        some function call in C# code which from then goes to a web service  
        success: function(e) {
            //alert('Saved Successfully');         
        }
    }; 

Answer 1

您将必须使用递归的概念，或者基本上使用回调循环。

(function recur(elements) {
    var elem = Array.prototype.shift.call(elements);

    if(elem) {
        $.ajax({
            url: "/path/to/check",
            success: function() {
                recur(elements); //Success, go again
            }
        });
    } else {
        //Done!
        refresh();
    }
})($(".radioControl:radio:checked"));

这里发生的事情是我们首先创建了recur函数。 您可能对IIFE（立即调用函数表达式）模式很熟悉，在该模式中我们创建了一个匿名函数并立即调用它（ (function(){})() ），但是在这种情况下，我们对其进行了命名，因此我们可以调用它每当我们想要在循环中进行时，它就会在其作用域内起作用。 接下来，我们发送一个元素数组，然后随着我们缓慢地执行循环，将第一项移出该数组，然后将新的，经过移位的数组发送到下一个迭代中。 这将耗尽数组，直到没有元素，即完成！

之所以使用Array.prototype.shift.call是因为jQuery对象不是本机数组，而是具有所有必要元素来允许我们在其上调用本机shift函数（即length和在索引处访问对象的能力） ）。