Ajax请求等到第一次AJAX调用未完成

I have below code for auto saving but i have problem lot of Ajax request firing on same time, i want to wait Ajax request Until first Ajax request not complete

我有以下代码用于自动保存,但我同时有很多Ajax请求触发,我想等待Ajax请求直到第一个Ajax请求未完成

window.submitting = false;
$('form#AddForm').submit(function() {
    window.submitting = true;
});

var timeoutId;
$('form input, form textarea, form select').bind('input propertychange change', function() {
    console.log('Change');

    if (window.submitting)
        return false;

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 5 second (5000 ms)   
        autoSave();
    }, 5000);
});

function autoSave() {
    $.ajax({
        type: "POST",
        data: $('form#AddForm').serialize() + '&autosave=true',
        beforeSend: function(xhr) {
            // Let them know we are saving
            console.log('Saving........');
        },
        success: function(data) {
            var jqObj = jQuery(data); // Ajax call here.
            var ProductId = jqObj.find("#ProductId").val();
            var url = $(location).attr('href');
            var split = url.split("add");
            if (ProductId) {
                history.pushState({}, null, split[0] + "add/" + ProductId);
                $('#ProductId').val(ProductId);
                $('form#AddForm').attr('action', '/dataproducts/add/' + ProductId);
            }
        },
    });
}

2 个解决方案

#1

It looks like i've catch your problem. If user triggers few change events on form elements new ajax request would be created, but shouldn't until previous are in process.

看起来我已经抓住了你的问题。如果用户在表单元素上触发了很少的更改事件,则会创建新的ajax请求,但在上一个处理过程之前不应该创建。

My guess you can use next approach: unbind listeners from form elements before you send ajax and bind them back when ajax would be completed.

我猜您可以使用下一种方法:在发送ajax之前从表单元素取消绑定侦听器,并在完成ajax时将它们绑定回来。

There are an excellent answer on SO regarding binding/unbinding: Best way to remove an event handler in jQuery?

关于绑定/解绑定的SO有一个很好的答案:在jQuery中删除事件处理程序的最佳方法是什么?

So basically you have to make a litle refactoring and add few lines of code:

所以基本上你必须进行litle重构并添加几行代码:

window.submitting = false;
$('form#ProductAddForm').submit(function() {
    window.submitting = true;
});

var timeoutId;
var saveHandler = function() {
    console.log('Change');

    if (window.submitting)
        return false;

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 5 second (5000 ms)
        autoSave();
    }, 5000);
};

$('form input, form textarea, form select').bind('input propertychange change', saveHandler);

function autoSave() {
    // unbind events
    $('form input, form textarea, form select').unbind('input propertychange change')
    $.ajax({
        type: "POST",
        data: $('form#ProductAddForm').serialize() + '&autosave=true',
        beforeSend: function(xhr) {
            // Let them know we are saving
            console.log('Saving........');
        },
        success: function(data) {
            var jqObj = jQuery(data); // Ajax call here.
            var ProductId = jqObj.find("#ProductId").val();
            var url = $(location).attr('href');
            var split = url.split("add");
            if (ProductId) {
                history.pushState({}, null, split[0] + "add/" + ProductId);
                $('#ProductId').val(ProductId);
                $('form#ProductAddForm').attr('action', '/account/products/add/' + ProductId);
            }
            // bind events back
            $('form input, form textarea, form select').bind('input propertychange change', saveHandler);
        },
        error: function{
            // bind events back even if reqeust fail
            $('form input, form textarea, form select').bind('input propertychange change', saveHandler);
        }
    });
}

Note jqXHR.success and jqXHR.error is deprecated, see $.ajax for more info. Also i've added error method, because you cannot miss binding listeners if ajax fails ...

注意不推荐使用jqXHR.success和jqXHR.error,有关详细信息,请参阅$ .ajax。此外,我添加了错误方法,因为如果ajax失败,你不能错过绑定侦听器...

2 个解决方案

#1

更多相关文章

随机推荐