Jquery等待循环中带有ajax调用的函数完成-单击按钮后刷新

本文关键字：单击 按钮 刷新 函数 循环 等待 调用 ajax Jquery | 更新日期: 2023-09-27 18:29:51

我在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');         
        }
    };

Jquery等待循环中带有ajax调用的函数完成-单击按钮后刷新

您将不得不使用递归的概念，或者基本上使用带有回调的循环。

(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和访问索引处对象的能力）。

相关文章：