Javascript .hasClass打开。单击直到第二秒才注册函数调用。单击..ajax async？

一些复选框按钮（使用引导）在.click上触发ajax get调用，选中按钮的活动性提供了一种过滤机制

现在，为什么过滤只在第二次单击事件的.click上正常工作（如果单击了btn1，ajax将以/.one.two.three…运行，并且只有在随后单击btn2时，它才会注册为/.two.three..，并且只有在随后单击btn3时，它才会注册为/.three

或者，如果在调用refreshData（）之前先删除了上的类。单击，则可以正确提供数据，但视图不反映removeClass

所有按钮都以活动类（）开头：

下面是removeClass被注释掉的click事件（按钮仍然保持视觉活动，类仍然保留在inspector中，但服务器使用此设置进行精确过滤）：

---

首先，出现问题的主要原因是bootstrap和jQuery坐在一起不太舒服——至少在这种情况下不是这样。jQuery的click事件调度得太早，它发生在bootstrap切换为“active”之前。因此

refreshData（）

在单击之前的按钮状态下操作，而不是在单击之后。这可以通过

超时（）

来克服，以延迟

刷新数据（）

的执行，直到引导完成它的工作

其次，您不需要切换

active

，因为bootstrap会关注这一方面

第三，通过更好地利用jQuery，可以更高效地编写代码

function refreshData(e) {
    var URL = $(e.target).closest(".btn-group").find("label").map(function (i) {
        if ($(this).hasClass("active")) {
            return ['.one', '.two', '.three', '.four'][i];
        } else {
            return null;
        }
    }).get().join(''); //.map() returns an array, .join() concatenates the strings in the array into a single string.

    alert('now ajax call with filtering :' + URL);
}

$("#theBtns .btn").on('click', function (e) {
    setTimeout(function () {
        refreshData(e);
    }, 0);
}); 

请注意，对于我们的目的来说，即使延迟为零也足够了，因为从

setTimeout

执行的代码将在当前线程运行到完成后的最早时间在单独的事件线程中运行

---

可能有一种更为“bootstrap”的方法来达到同样的目的，但我不打算费力阅读大量的bootstrap文档来找出答案。

您认为

$的意义是什么。当（筛选（））.done

是？调用

。当对URL调用
是毫无意义的时候，为什么不能在没有
的情况下调用它。当
时，他在筛选（）中有一个椭圆，他没有在他的问题中包括所有过滤的实现，因为这显然是不必要的。所以你可以假设这是一个长期运行的函数，这就是为什么要使用它。when@BenjaminGruenbaum.when是一个关于如何在ajax调用之前获得hasClass的想法..URL随后被附加到URL，正如刚才编辑的..任何关于让URL准确反映BTN活动状态的其他建议？你能做一个单独的提琴吗？@BrianOgden感谢你的评论。.帖子已经更新，以反映URL变量的使用位置。.关于让BTN活动状态准确地由URL变量表示的任何建议？
function refreshData() {

    console.log('started refreshData()')

    URL = '';

    var filtering = function() {

        if($(".btn1").hasClass("active")) { URL += ".one"; }
        if($(".btn2").hasClass("active")) { URL += ".two"; }
        ...

    console.log('done filtering: ' + URL);

        return URL;
    };

    $.when( filtering() ).done(function() {

    console.log('now data refresh with %s filtering', URL)

    $.ajax({
      url:"http://localhost:4200/api/v1/data" + URL,
      method:'get',
      success: foundAllSuccess,
      error: foundError

    })

    });

}

$( ".btn1" ).click(function() {
  // if($(".btn1").hasClass("active")) {$(".btn1").removeClass("active"); console.log('hide btn1 data');}
  // else {$(".btn1").addClass("active"); console.log('btn1 data active');}
  refreshData();
}); // .btn1.click

function refreshData(e) {
    var URL = $(e.target).closest(".btn-group").find("label").map(function (i) {
        if ($(this).hasClass("active")) {
            return ['.one', '.two', '.three', '.four'][i];
        } else {
            return null;
        }
    }).get().join(''); //.map() returns an array, .join() concatenates the strings in the array into a single string.

    alert('now ajax call with filtering :' + URL);
}

$("#theBtns .btn").on('click', function (e) {
    setTimeout(function () {
        refreshData(e);
    }, 0);
});