JavaScript中动态DOM元素选取与事件绑定：避免异步加载陷阱

// productSave.js (原始错误示例)
class Product { /* ... */ }

// 此处初始化links时，动态元素尚未被添加到DOM
const links = document.querySelectorAll('.catalog__link'); 

export const productSave = function () {
  window.addEventListener('DOMContentLoaded', () => { // DOMContentLoaded事件可能在动态元素加载前触发
    console.log(links); // links此时可能为空数组
    links.forEach(link => { /* ... */ });
  });
};

// productSave.js (修正示例 - 延迟选取)
class Product {
  constructor(cardImg, cardName, cardBrand = '', cardPrice) {
    this.cardImg = cardImg;
    this.cardName = cardName;
    this.cardBrand = cardBrand;
    this.cardPrice = cardPrice;
  }
}

export const productSave = function () {
  // 确保在调用此函数时，动态元素已存在于DOM中
  const links = document.querySelectorAll('.catalog__link'); 
  console.log('Found links:', links); // 此时应该能正确获取到元素

  if (links.length === 0) {
    console.warn('No .catalog__link elements found. This might indicate a timing issue.');
    return; // 如果没有找到元素，提前退出
  }

  links.forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault(); // 阻止默认跳转行为
      const productItem = link.querySelector('.catalog__product');
      // 检查元素是否存在，避免空引用错误
      if (!productItem) {
        console.error('Product item not found within link:', link);
        return;
      }
      const newProduct = new Product(
        productItem.querySelector('.catalog__productImg')?.src || '',
        productItem.querySelector('.catalog__product-model')?.textContent || '',
        productItem.querySelector('.catalog__product-brand')?.textContent || '',
        productItem.querySelector('.catalog__product-price')?.textContent.replace(/\D/g, '') || ''
      );
      localStorage.setItem('newCard', JSON.stringify(newProduct));
      console.log('Product saved:', newProduct);
    });
  });
};

// fillCatalog.js (修正示例 - 返回Promise)
const row = document.querySelector('.catalog__row');

export const fill = function (brand) {
  // 返回fetch Promise，以便外部可以链式调用
  return fetch(`./data/${brand}.json`)
    .then(function (response) {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(function (data) {
      let products = [...data.products];
      products.forEach(product => {
        row.insertAdjacentHTML(
          'afterbegin',
          ` <a class="catalog__link" href="#" >
              <div class="catalog__product">
              <div class="catalog__product-img">
              <img class="catalog__productImg" src=${product['img-src']} alt="" srcset="" />
              </div>
              <h3 class="catalog__product-model">${product['model']}</h3>
              <p class="catalog__product-brand">${product['brand']}</p>
              <span class="catalog__product-price">${product['price']}</span>
          </div></a>`
        );
      });
      console.log(`Catalog filled with ${products.length} products for brand: ${brand}`);
      // 无需额外返回，因为insertAdjacentHTML是同步操作，一旦forEach完成，DOM就更新了
    })
    .catch(error => {
      console.error('Error fetching or filling catalog:', error);
      // 可以在此处处理错误，例如显示错误消息给用户
      throw error; // 重新抛出错误，以便链式调用中的catch也能捕获
    });
};

// loadContent.js (修正示例 - Promise链式调用)
import { fill } from './fillCatalog.js';
import { productSave } from './productSave.js';

// 调用fill函数，并链式调用productSave
fill('jordans')
  .then(() => {
    productSave(); // 当fill函数成功完成后才执行productSave
  })
  .catch(error => {
    console.error('Failed to load content or bind product save:', error);
  });

// 轮询检测动态元素示例
function waitForElements(selector, timeoutMs = 10000, intervalMs = 200) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    const interval = setInterval(() => {
      const elements = document.querySelectorAll(selector);
      if (elements.length > 0) {
        clearInterval(interval);
        resolve(elements); // 找到元素，解决Promise
      } else if (Date.now() - startTime >= timeoutMs) {
        clearInterval(interval);
        reject(new Error(`Elements with selector "${selector}" not found within ${timeoutMs}ms.`)); // 超时，拒绝Promise
      }
    }, intervalMs);
  });
}

// 在loadContent.js中使用
import { fill } from './fillCatalog.js';
import { productSave } from './productSave.js';

fill('jordans')
  .then(() => waitForElements('.catalog__link')) // 等待.catalog__link元素出现
  .then(links => {
    console.log('Elements found via polling:', links);
    productSave(); // 元素找到后执行事件绑定
  })
  .catch(error => {
    console.error('Error in loading or binding process:', error);
  });