jQuery的等到与循环Ajax调用的函数完成 - 一个按钮单击刷新后 [英] Jquery wait till a function with ajax call in loop is completed - Refresh after a Button Click

问题描述

我在jQuery的一个按钮单击事件里面的一些code。它得到所有的单选按钮在aspx页面，它会通过他们环路根据自己点击的状态，并使用Ajax调用（在C＃中的函数这的确再次将其​​传递到WebService）一一保存。

现在我想调用页面刷新功能节省事件之后。但是，当我调用事件的页面是越来越刷新之前所有的节约可能发生，只有少数的点击的按钮处于它们的新检查状态，而其他根据它们的旧状态还是加载。

让我怎么等到所有的储蓄完成，并调用刷新功能...我试图jQuery的时候，并触发和其他一些方法，但没有什么似乎工作..

  $（'＃btnSubmit按钮'）。点击（函数（）{
        $（'radioControl：单选：检查）。每个（函数（E，I）{
            .............
           commentsAjax.doAjax（...）; //功能
        }）;
       刷新（）;
    }）;
 commentsAjax = {
    doAjax：功能（....）{
        ................
        在C＃code一些函数调用从然后去到Web服务
        成功：功能（E）{
            //警报（'成功保存'）;
        }
    };
 

解决方案

你将不得不使用递归的概念，或者用一个回调基本循环。

 （函数复发（元素）{
    VAR ELEM = Array.prototype.shift.call（元素）;    如果（ELEM）{
        $阿贾克斯（{
            网址：/路径/要/查询，
            成功：函数（）{
                复发（元素）; //成功，又来了
            }
        }）;
    }其他{
        //完成！
        刷新（）;
    }
}）（$（radioControl：电台：勾选））;
 

这里发生的事情是，我们首先创建我们的复发功能。你可能熟悉IIFE（立即调用函数前pression）模式，我们创建一个匿名函数，并立即调用它（（函数（）{}）（）），但是在这种情况下，我们将其命名为哪些从而使我们打电话说在它的功能范围，每当我们要在循环的进展。接下来，我们发送元素的数组和我们慢慢地通过循环进步，我们转移的第一个项目出数组的和新的，转移阵列送入下一个迭代。这耗尽阵列中，直至留下了没有元素，即完成！

我们使用的原因 Array.prototype.shift.call 是因为jQuery对象是不是原生数组，但拥有所有必要的元素，使我们能够调用本机（这是长度，并在索引访问对象的能力）就可以了移功能。

I have some code inside a button click event in jquery. It gets all the radio buttons in a aspx page and it will loop through them according to their clicked status and save them using ajax call (to a function in c# which indeed passes it again to a webservice) one by one.

Now I want to call page refresh function after the saving event. But when I call the event the page is getting refreshed before all the saving could happen and only few of the clicked button are in their new checked status while others are still loaded according to their old status.

So how do i wait till all the saving is done and call the refresh function... I tried jquery when and trigger and few other methods but nothing seem to work..

 $('#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');         
        }
    }; 

解决方案

You're going to have to use a concept of recursion, or loops with a callback basically.

(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"));

What's happening here is that we first create our recur function. You might be familiar with the IIFE (Immediately Invoked Function Expression) pattern where we create an anonymous function and invoke it immediately ((function(){})()) however in this case, we name it which thus allows us to call said function within it's scope whenever we want to progress in the loop. Next, we send an array of elements and as we slowly progress through the loop, we shift the first item out of the array and send the new, shifted array into the next iteration. This depletes the array until were left with no elements, i.e. finished!

The reason we use Array.prototype.shift.call is because a jQuery object is not a native array but has all the necessary elements to allow us to call the native shift function on it (which are length and the ability to access objects at indexes).

这篇关于jQuery的等到与循环Ajax调用的函数完成 - 一个按钮单击刷新后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！