jquery—查找通过单击多个元素之一触发的特定ajax调用是否完成

假设在HTML中我有：

<a href="javascript:void(0)" data-lang="en" class="load_more load_more_en">Element EN</a>

<a href="javascript:void(0)" data-lang="bn" class="load_more load_more_bn">Element BN</a>

通过单击任何

load\u more

类元素可以触发ajax调用

假设用户单击

load\u more\u en

class元素并触发ajax调用。我不想在第一个调用完成之前，在下一次单击“加载更多”时触发另一个调用

但是用户仍然可以单击

load\u more\u bn

class元素，同时触发另一个ajax请求。只有当单击

load\u more\u en

元素的ajax调用完成时，用户才能触发另一个ajax请求，单击

load\u more\u en

元素

如果只有一个元素（即

load\u more\u en

），我可以按以下方式执行：

can_do_ajax=1;
$(".load_more").click(function(){

    $elem=$(this);
    var data_lang = $elem.attr('data-lang');

    if(can_do_ajax){

        can_do_ajax=0;

        $.ajax({

            method:"POST",
            url:"/myurl",
            data:{data_lang:data_lang},

            success:function(response){
                can_do_ajax=1;

            },
            error:function(response){
                can_do_ajax=1;
            }

        });

    }// end of if

});

---

但是现在有两个元素具有相同的类，我如何实现这一点呢？

要实现这一点，可以在发送AJAX请求之前，单击元素时在元素上放置一个类。然后，该类可以在UI中设置类似禁用的状态。您还可以在单击处理程序中检查此类（如果有人试图绕过CSS规则），以确保每个

元素只能发出一个请求。然后，可以在AJAX调用完成时删除该类。试试这个：


$（“.load\u more”）。单击（函数（e）{
e、 预防默认值（）；
变量$elem=$（本）；
if（$elem.hasClass（'ajax-pending'））
返回；
$elem.addClass（'ajax-pending'）；
var data_lang=$elem.data（'lang'）；
log（`loading${data\u lang}`）；
//此演示的模拟AJAX调用。。。
setTimeout（函数（）{
//假设这是完整的处理程序：
$elem.removeClass（'ajax-pending'）；
log（`${data\u lang}已加载`）；
}, 3000);
});
.ajax挂起{
颜色：#CCC；
指针事件：无；
}

假设用户单击
load\u more\u en
并将
ajax挂起类添加到该元素中，并发出ajax请求。然后，用户单击加载更多，并发出第二个ajax请求。第一个请求比第二个请求需要更长的时间才能完成。第二个请求的
success
回调是否仅从
load\u more\u bn
或从
load\u more\u en
和
load\u more\u bn
中删除
ajax挂起
类？它将仅从与该ajax请求相关的按钮中删除它-如果单击一个链接，可以在上面的示例中看到这一点，然后是另一个。
can_do_ajax=1;
$(".load_more").click(function(){

    $elem=$(this);
    var data_lang = $elem.attr('data-lang');

    if(can_do_ajax){

        can_do_ajax=0;

        $.ajax({

            method:"POST",
            url:"/myurl",
            data:{data_lang:data_lang},

            success:function(response){
                can_do_ajax=1;

            },
            error:function(response){
                can_do_ajax=1;
            }

        });

    }// end of if

});