javascript - 如何避免多次AJAX调用？

Question

我正在使用以下代码通过 AJAX 提交表单:

$( 'form' ).submit(function(e) {

    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        success: function( data ) {
            // Do something here.
        },
        error: function( data ) {
            // Do something here.
        }
    });
    return false;
});

背景

我的 PHP 处理程序执行各种任务，然后发回响应。然后我可以在成功或错误函数中使用 data 执行某些操作。

我的问题

当用户双击表单的提交按钮时，会发生两次 AJAX 调用，这会导致我的 PHP 处理程序内的代码执行两次。

我的问题

如果用户双击提交，如何避免我的代码被执行两次？

Answer 1

只需添加一些控制变量:

var isSubmitting = false;

$( 'form' ).submit(function(e) {
    if(isSubmitting) {
        return;
    }
    isSubmitting = true;
    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'json',
        data: {
            'action': 'my_action',
            'str': $( 'form' ).serialize()
        },
        success: function( data ) {
            isSubmitting = false;
            // Do something here.
        },
            error: function( data ) {
            isSubmitting = false;
            // Do something here.
        }
    });
    return false;
});