你怎么使用。当()。则()来触发功能的。当采用递延对象时()? [英] How do you use .when().then() to trigger a function when using deffered objects in the .when()?

查看:108
本文介绍了你怎么使用。当()。则()来触发功能的。当采用递延对象时()?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页面中,我有不同数量的AJAX调用来使这是一个共同的事件触发。 Ajax调用本身更新SQL数据库相关领域。一旦所有的呼叫都完成后,我想刷新页面,以便它现在反映刚才所做的更改。

I have a page in which I have a variable number of AJAX calls to make which are triggered on a common event. The AJAX calls themselves are to update related fields in a SQL database. Once all the calls are complete, I want to refresh the page so that it now reflects the changes just made.

我以前就在这里了以下问题/答案弄到.. <一href="http://stackoverflow.com/questions/8460172/jquery-when-each-is-completede-trigger-function">jQuery当每个是completede触发功能

I used the following question/answer on here to get so far.. jQuery when each is completede trigger function

下面是我的code到目前为止:

Here is my code so far:

var team_update = function(e) {
    var $items = $('.sortable-items');
    var XHRs = [];

    $items.each(function(){
        var team_id = $( this ).attr("id");
        var data =  {
            tid: team_id,
            users: $('#' + team_id).sortable('toArray')
            };

        XHRs.push(
            $.ajax({ 
                type: "POST", 
                url: "update.php", 
                data: data, 
                complete: function(data){
                } 
            })  
        );

    });

    $.when(XHRs).then(function(){
        console.log('Refreshing Screen');
        $('#content-wrapper').load( 'index.php' );
    });

}

我所期待的事情发生,就是 $('#内容包装)的负载('的index.php'); 会火,一旦所有我的ajax()请求已完成。这似乎是发生虽然是,一旦所有的请求都被发送,他们已经完成了不一定之后,因此,有时我的页面更新仍然有它的老数据回调​​射击。

What I was expecting to happen, is that the $('#content-wrapper').load( 'index.php' ); would fire, once all my ajax() requests had completed. What appears to be happening though, is that the callback is firing once all the requests have been sent, not necessarily after they have completed, and so sometimes my page update still has 'old' data on it.

图形下面显示了我的初始页面加载在顶部,这可以忽略。其在接下来的4项,显示的问题。有3 POST请求,这是我的3 AJAX调用来更新数据库,最终获取将是刷新页面。所有的3 AJAX调用后,页面刷新GET大火已发送,但它不等待最后AJAX调用来完成它触发了。因此,它再变老数据,在完成前previous AJAC调用完成更新数据库。

The graphic below shows my initial page load at the top, which can be ignored. Its the next 4 entries that show the issue. There are 3 POST requests which are my 3 ajax calls to update the DB, and the final GET which is the page refresh. The Page refresh GET fires after all 3 ajax calls have been sent, but it doesn't wait for the last ajax call to complete before it fires. As a consequence, it then gets old data as it completes before the previous ajac call has finished updating the database.

我在做什么错在这里?

推荐答案

我最近申请类似的东西。

I recently applied something similar.

时()需要一个延迟的对象或延期对象列表,但如果你想使用一个数组,你需要使用申请( )

when() expects a deferred object or list of deferred objects, but if you want to use an array, you need to use apply().

替换

$.when(XHRs)

$.when.apply(null, XHRs)

如果这不起作用,你可能需要包装在一个函数的调用Ajax:

If this does not work, you might need to wrap your Ajax call in a function:

function SendAjax(data){
return $.ajax({Options as they are in your ajax call});
}

,然后将它们推到XHRs这样:

and then push them to XHRs as such:

XHRs.push(SendAjax(data));

下面是如何在我的code实现这一点,你可以根据需要适应这样的:

the following is how I implemented this in my code, you can adapt this if needed:

//We want to notify how many memberships have been made after they're all made. since they're async, we'll need to use promises
//however, because we repeat the same ajax call with different parameters, we need to push them to an array and then apply() them.
checkedBoxes.each(function () {
    createArray.push(CreateMembershipsAjax(this));
});
//we did the work before we start creating them, so show some progress;
add1ToProgress();
$.when.apply(null, createArray).done(function () {
    //this function will only start once all ajax calls have been successfull.
    divCreated.append(membershipCount + " memberships created:");
    MembershipsCreated = true;
    window.close();
});

...

CreateMembershipsAjax(element){
    //process element, create Data from it;
    return $.ajax({option});
}

是的,该意见实际上是在我的code,而不只是增加了澄清此页面上。

And yes, the comments are actually in my code and not just added for clarification on this page.

这篇关于你怎么使用。当()。则()来触发功能的。当采用递延对象时()?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆