Jquery异步错误停止其他操作

时间:2015-02-05 16:31:34

标签: javascript jquery ajax asynchronous

对不起,我真的不知道如何解释这个,所以希望下面的代码显示了需要发生的事情。

我单击一个按钮,它应该隐藏$(this).hide();并转向微调器$(this).hide();然后运行调和或不调和的ajax函数,完成后再次使用适当的样式显示按钮。 ajax函数需要async: false才能一次只执行一个,但是当设置它时,微调器就会停止显示。如果我删除async: false,则微调器会显示,但允许用户点击多行,数据可能会混淆。

// click on the button to verify/unverify the transaction
$('.txn_check').click(function(){
    $(this).hide();
    $(this).parent().find('.recon-saving').show();

    if($(this).hasClass('txn_verified')){
        unreconcile($(this));
    } else {
        reconcile($(this));
    }
});

function reconcile(txnObj){
    {literal}
    $.ajax({
        type: 'POST',
        async: false,
        url: '/accounting/bank/do-reconcile-transaction',
        data: {bank_account_id: bank_account_id,
                     accounting_entry_id: txnObj.data('accounting-entry-id'),
                     accounting_journal_key_type: txnObj.data('accounting-journal-key-type'),
                     accounting_journal_id: txnObj.data('accounting-journal-id'),
                     txn_id: txnObj.data('txn-id'),
                     txn_value_in: txnObj.data('txn-value-in'),
                     txn_value_out: txnObj.data('txn-value-out'),
                     verified_balance: $('#verified_balance').val()},
        success: function(result){
            var result = $.parseJSON(result);
            if(result.result == 'SUCCESS'){
                mark_verified(txnObj);
                // update_balance_rows();
                $('#verified_balance').val(result.verified_balance);
                $('#verified_balance_text').text(display_number(result.verified_balance));
                get_difference();
            } else {
                mark_unverified(txnObj);
            }
        },
        error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    });
    {/literal}
} 

1 个答案:

答案 0 :(得分:0)

您应该设置请求异步,然后使用:

$('.txn_check').click(function(){
     $('.txn_check').prop('disabled', true); // avoid any click while request pending
     $(this).hide();
     //...
});

现在是ajax请求:

function reconcile(txnObj){    
    $.ajax({
        type: 'POST',
        async: true,
        // all others request options here...
    }).always(function(){ // or use complete option of ajax request
         $('.txn_check').prop('disabled', false); //reenable other buttons
    });
}

这是基本的想法,在您的具体情况下不确定您希望如何处理它。