火狐浏览器下WordPress fontsampler插件JS设置CSS缓存问题求助

问题根因 #

• 元素存在性判断逻辑错误：使用val()方法判断DOM元素是否存在不符合规范，.fontsampler-id-*若为非表单元素时val()永远返回undefined，即使元素真实存在也会导致判断分支不生效，Chromium内核的渲染速度刚好覆盖了这个逻辑漏洞，才会表现为正常。
• 浏览器渲染时序差异：Firefox的自定义事件触发与DOM异步渲染队列的执行顺序和Chromium内核不同，fontsampler.event.afterinit事件触发时，部分DOM节点可能还未完成挂载，此时操作DOM样式不会生效。
• 无重复执行防护：该事件最多会触发3次，未添加已执行标记的情况下，可能前两次触发时元素未加载完成，第三次触发时逻辑判断失败导致最终不执行隐藏操作。

修复后代码 #

jQuery(document).ready(function( $ ){
  // 新增执行锁，避免逻辑重复运行
  let fontPickerHidden = false;
  $("body").on("fontsampler.event.afterinit",".fontsampler-wrapper" , function () {
    // 已执行过直接返回
    if (fontPickerHidden) return;
    
    const fsAll = $(".fontsampler-interface");
    const fsCount = fsAll.length;
    // 只有1个字体选择器时不需要隐藏，直接标记执行完成
    if (fsCount < 2) {
      fontPickerHidden = true;
      return;
    }
    
    // 校验最后一个fontsampler的字体选择框是否完成挂载
    const lastFs = $(`.fontsampler-id-${fsCount}`);
    if (lastFs.find(".fontsampler-ui-block-fontpicker").length === 0) return;

    // 批量隐藏除最后一个之外的所有字体选择框，无需单独判断数量
    fsAll.not(`:last`).find(".fontsampler-ui-block-fontpicker").hide();
    
    // 标记逻辑执行完成
    fontPickerHidden = true;
  });

  // 新增兜底逻辑，1秒后强制执行一次，适配Firefox极端渲染延迟场景
  setTimeout(() => {
    if (!fontPickerHidden) {
      $(".fontsampler-interface:not(:last)").find(".fontsampler-ui-block-fontpicker").hide();
      fontPickerHidden = true;
    }
  }, 1000);
});

优化说明 #

• 替换为.length属性判断DOM元素是否存在，符合jQuery开发规范，兼容性更强
• 新增执行锁标记，避免事件多次触发导致的逻辑冲突
• 直接用:not(:last)选择器批量过滤需要隐藏的元素，无需单独判断页面上是2个还是3个fontsampler，逻辑更简洁
• 新增setTimeout兜底逻辑，覆盖Firefox极端情况下的渲染延迟场景
• 替换为jQuery内置的hide()方法，比直接操作style.display兼容性更好

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