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 以及访问索引处的对象）。