Question

我有几个文本框的更改事件的jQuery处理程序。

$(vendorsPopUp).on('change', 'input', function (e) {
    // Call server to calculations new results
    $.post( ... );
    // Then update client elements with new results
}

我点击了“保存”按钮时有另一个处理程序。

$('#VendorsPopUpSave', vendorsPopUp).on('click', function (e) {
    // Call server to save new results
    $.post( ... );
});

如果用户编辑文本框然后单击“保存”按钮，则会出现问题：

首先调用我的change事件处理程序，然后调用Save按钮的处理程序。（注意：在文本框失去焦点之前不会调用更改事件，并且在此方案中不会发生这种情况，直到单击“保存”按钮后。）问题是当调用Save按钮的处理程序时，第一个处理程序的AJAX调用尚未完成。

理想情况下，Save按钮处理程序将等到第一个处理程序的AJAX调用完成后再继续。

是否有可以接受的处理此类情景的做法？

Answer 1

您可以将第一个请求的jqxhr对象存储在变量中，然后在单击处理程序中检查是否设置了该变量，并将第二个ajax推迟到第一个请求完成（jqxhr对象为promises）

var xhr;

$(vendorsPopUp).on('change', 'input', function (e) {
    // Call server to calculations new results
    xhr = $.post( ... );
    // Then update client elements with new results
}


$('#VendorsPopUpSave', vendorsPopUp).on('click', function (e) {
    // Call server to save new results
    var post = function(){
      $.post( ... );
    };

    if(xhr)
      xhr.then(post);

    // else post(); 
});

事件处理程序等待来自其他事件处理程序的AJAX调用

1 个答案: