如何在ajax调用之前禁用函数，并在ajax成功时启用它

how to disable a function before ajax call, and enable it on ajax success?

本文关键字：ajax 并在 成功 启用 函数 调用      更新时间：2023-09-26

我有一个函数在ajax函数之外，我想在ajax运行时禁用这个"启用"点击函数，并在ajax成功加载后启用它，我该如何做到这一点？如有任何帮助，我们将不胜感激。这是我的代码：

 $('enable').click(function () {
        console.log(123);
        $(this).css('display', 'none');
 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) { 
            console.log(data);
    ; 

var enable = true;
$('enable').click(function () {
     if(enable) {
        enable = false;
        console.log(123);
        $(this).css('display', 'none');
         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) {
                console.log(data);
                enable = true;
            }
        });
    }
});

当ajax被触发时，您可以将enable设置为false。

编辑：

有这样的事吗？

var enable = true;
$('enable').click(function () {
     if(enable) {
        console.log(123);
        $(this).css('display', 'none');
     }
});
function callAjax() {
    enable = false;
    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) {
            console.log(data);
            enable = true;
        }
    });
}

如果ajax在点击函数内，则：

$('enable').click(function () {
     console.log(123);
     $(this).hide();
     var that=this;         
     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) { 
                console.log(data);
                $(that).show();
            }
     });
});

其他：

$('enable').bind('click',function () {
     console.log(123);
     $(this).unbind('click');
});
     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) { 
                console.log(data);
                $('enable').bind('click',function () {
                    console.log(123);
                    $(this).unbind('click');
                });
            }
     });

尝试使用.one而不是.on，然后在success上附加处理程序。

function sendRequest() {
  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) { 
      console.log(data);
      $('enable').one('click', sendRequest); // We restore it when get success
    }
}
$('enable').one('click', sendRequest); // once you clicked your handler would be removed

当您想要禁用点击事件时，您可以有一个可以引发的标志：

$('enable').click(function () {
    if ($(this).data('disabled')) return;
    $(this).data('disabled', true);
    $.ajax({ ... }).always(function() { $(this).data('disabled', false); }.bind(this));
});

使用.always()确保在ajax请求也失败时启用它。

相关文章：