网站筛选器计数更新滞后问题求助：点击后计数总是慢一步

问题说明 #

网站筛选功能需要实时显示已激活筛选器的数量，但当前计数总是滞后一步，必须多点击一次才能得到正确数值。核心原因是计数更新时机不对——代码在点击事件触发后立即执行统计，但此时筛选器的is-active类还未完成添加/移除操作，导致统计的是点击前的状态。

原代码 #

let countFilter = 0;

function updateFilterCount() {
  let countFilter = $(".is-active").length;
  $(".caps.count").text(countFilter);
  if (countFilter > 0) {
    $(".filtered-text").addClass("active");
    $(".caps.all.active").removeClass("active");
  } else {
    $(".filtered-text.active").removeClass("active");
    $(".caps.all").addClass("active");
  }
}

updateFilterCount();

$(".fltr, .fltr-label, .filter_drawer, .button.ghost.filter__button.active").on(
  "click",
  function () {
    updateFilterCount();
  }
);

修复方案 #

方案1：延迟执行统计（快速生效） #

利用setTimeout将计数更新推迟到浏览器完成DOM更新后执行，确保统计最新状态：

$(".fltr, .fltr-label, .filter_drawer, .button.ghost.filter__button.active").on(
  "click",
  function () {
    // 延迟0毫秒，让DOM先完成类的变更
    setTimeout(updateFilterCount, 0);
  }
);

方案2：绑定到状态变更源头（更可靠） #

如果筛选器的is-active类是通过特定切换逻辑添加/移除的，直接在修改类的代码之后调用计数更新函数，而非依赖点击事件：

// 假设切换筛选器的核心函数是toggleFilter
function toggleFilter(element) {
  $(element).toggleClass("is-active");
  // 类修改完成后立即更新计数
  updateFilterCount();
}

方案3：用MutationObserver监听DOM变化（通用适配） #

若无法找到类变更的源头，使用MutationObserver监听DOM中is-active类的变化，自动触发计数更新：

// 目标节点：所有可能被添加/移除is-active类的筛选器元素
const targetNodes = $(".fltr, .fltr-label, .filter_drawer");

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 检测类属性是否发生变化
    if (mutation.attributeName === "class") {
      updateFilterCount();
    }
  });
});

// 配置观察选项
const config = { attributes: true, subtree: true };

// 启动观察
targetNodes.each(function() {
  observer.observe(this, config);
});

额外优化：清理冗余变量 #

原代码中全局的countFilter变量未被使用，可直接删除以避免变量污染：

// 移除冗余全局变量：let countFilter = 0;

function updateFilterCount() {
  const countFilter = $(".is-active").length;
  // 其余代码保持不变
}

内容的提问来源于stack exchange，提问作者samschwing