window.onload偶尔失效求助：刷新HTML时故障重现

你的问题核心是异步操作的执行顺序冲突：fetchProducts()是异步函数，需要等待JSON文件请求、解析完成后才会生成产品卡片；但window.onload是页面DOM加载完成就触发，这时候如果JSON请求还没结束，.card元素还没被创建，filterProduct("all")找不到目标元素，自然无法生效。偶尔正常是因为JSON请求被浏览器缓存，速度快到刚好在window.onload前完成了卡片创建。

提供两种直接可行的修改方式：

方式一：卡片生成完成后自动触发过滤 #

修改displayProducts函数，在所有产品卡片添加到DOM后调用过滤函数，确保操作时机准确：

function displayProducts(products) {
  let productContainer = document.getElementById("products");
  // 增加容器存在判断，避免DOM元素缺失报错
  if (!productContainer) {
    console.error("未找到产品容器元素");
    return;
  }

  for (let product of products) {
    // 原有的卡片创建逻辑保持不变
    // ...
    productContainer.appendChild(card);
  }
  // 所有卡片生成后执行过滤
  filterProduct("all");
}

然后删除原代码末尾的window.onload代码块，同时保留最开始的fetchProducts();调用即可。

方式二：统一在页面加载后等待异步操作完成 #

把异步请求和过滤逻辑都放到window.onload中，用await确保产品加载完成后再执行过滤：

// 删除原代码中直接调用的 fetchProducts();
window.onload = async () => {
  await fetchProducts(); // 等待产品加载、卡片生成完成
  filterProduct("all");
};

• 在filterProduct函数中也可以增加元素存在判断，避免无意义报错：

function filterProduct(value) {
  let buttons = document.querySelectorAll(".button-value");
  if (!buttons.length) return;
  // 原过滤逻辑...
  
  let elements = document.querySelectorAll(".card");
  if (!elements.length) return;
  // 原显示/隐藏逻辑...
}

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