Javascript 如何在ajax运行时禁用单击功能，相同的单击将启动ajax运行，在ajax完成后，重新启用单击功能

我有一个单击功能启动ajax后期运行，如何在ajax运行时禁用相同的单击功能，并在ajax完成后重新启用它？下面的代码显示了我想要的：

    $('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');
    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);

           });
        }
    });

---

最简单的方法是向元素添加class或data-*属性。单击它时，添加该类/属性并启动AJAX。完成后将其移除。如果在AJAX运行时单击该类/属性，则该类/属性表示它仍在运行，并且在删除之前不应继续操作。

最简单的方法是向元素添加类或数据-*属性。单击它时，添加该类/属性并启动AJAX。完成后将其移除。如果在AJAX运行时单击该类/属性，则该类/属性表示该类/属性仍在运行，在删除之前不应继续操作。

以下是代码：

$('input.btn_search').click(function () {

    // Disable before ajax starts
    $(this).attr('disabled', true);

    var xhr =  $.ajax({

    success: function (data) {

       // Enable after ajax completes
       $(this).removeAttr('disabled');
    }
}); 

代码如下：

$('input.btn_search').click(function () {

    // Disable before ajax starts
    $(this).attr('disabled', true);

    var xhr =  $.ajax({

    success: function (data) {

       // Enable after ajax completes
       $(this).removeAttr('disabled');
    }
}); 

请尝试以下代码：

 $('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

var thisbutton = $(this);
    thisbutton.attr("disabled", "disabled");

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');
    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);                    
           });
           thisbutton.removeAttr("disabled");
        }
    });

示例：

请尝试以下代码：

 $('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

var thisbutton = $(this);
    thisbutton.attr("disabled", "disabled");

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');
    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);                    
           });
           thisbutton.removeAttr("disabled");
        }
    });

---

示例：

onClick事件该按钮的add attribute disabled=true，在ajax响应后删除按钮标记的disabled属性只需在单击时将

disabled

属性设置为

true

，并在调用ajax回调时将其设置为

false

。该按钮的onClick事件add attribute disabled=true和ajax响应后，删除按钮标记的disable属性只需在单击时将

disabled

属性设置为

true

，并在调用ajax回调时将其设置为

false

。