WordPress竞拍站AJAX移除倒计时元素后JS报错的解决咨询

问题背景 #

基于WordPress+WooCommerce开发竞拍网站，使用自定义倒计时JS展示商品竞拍结束时间，正常运行无问题，但执行AJAX无刷新查询导致目标元素被移除/替换后，控制台持续抛出Uncaught TypeError: dollersign(...) is null错误，希望在不刷新页面的前提下解决。

解决方案 #

核心思路是增加元素存在性检查+可控终止计时器循环，避免元素消失后代码仍尝试操作DOM。

修改后的倒计时JS代码 #

const dollersign = elem => document.querySelector(elem);
const countdown = function(_config) {
  // 初始化时先检查目标元素是否存在
  const targetElem = dollersign(_config.target);
  if (!targetElem) return;

  const tarDate = targetElem.getAttribute('data-date').split('-');
  const day = parseInt(tarDate[2]);
  const month = parseInt(tarDate[1]);
  const year = parseInt(tarDate[0]);
  let tarTime = targetElem.getAttribute('data-time');
  let tarhour = 0, tarmin = 0;
  if (tarTime != null) {
    tarTime = tarTime.split(':');
    tarhour = parseInt(tarTime[0]);
    tarmin = parseInt(tarTime[1]);
  }

  const countDownDate = new Date(year, month-1, day, tarhour, tarmin, 0, 0).getTime();
  let animationId;

  const updateTime = () => {
    // 每次更新前检查目标元素是否还存在
    if (!dollersign(_config.target)) {
      // 元素已被移除，终止计时器循环
      cancelAnimationFrame(animationId);
      return;
    }

    const now = new Date().getTime();
    const distance = countDownDate - now;

    const days    = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours   = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    if (distance <= 0) {
      const elem = dollersign(_config.target);
      if (elem) elem.innerHTML = "EXPIRED";
    } else {
      animationId = requestAnimationFrame(updateTime);
      const dayNumElem = dollersign(_config.target+' .day .num');
      if(days!=0 && dayNumElem){
        dayNumElem.innerHTML = addZero(days);
      }
      const hourNumElem = dollersign(_config.target+' .hour .num');
      const minNumElem = dollersign(_config.target+' .min .num');
      const secNumElem = dollersign(_config.target+' .sec .num');
      if(hourNumElem) hourNumElem.innerHTML = addZero(hours);
      if(minNumElem) minNumElem.innerHTML = addZero(minutes);
      if(secNumElem) secNumElem.innerHTML = addZero(seconds);
    }
  }
  updateTime();
}
const addZero = (x) => (x < 10 && x >= 0) ? "0"+x : x;

额外注意事项 #

• AJAX刷新后重新初始化：当AJAX完成页面元素更新后，需要重新调用countdown()初始化新的倒计时元素，确保新元素能正常启动计时器。
• 避免重复初始化：可以给已初始化的元素加标记（比如data-countdown-init="true"），初始化前检查标记，防止重复创建计时器。

示例AJAX回调中重新初始化的代码：

// 假设这是你的AJAX成功回调
jQuery.ajax({
  url: 'your-ajax-url',
  success: function(response) {
    // 更新页面内容后
    jQuery('.countdown:not([data-countdown-init="true"])').each(function() {
      const $this = jQuery(this);
      $this.attr('data-countdown-init', 'true');
      countdown({
        target: `#${this.id}` || `.${this.className.split(' ')[0]}`,
        dayWord: " zile",
        hourWord:" ore",
        minWord: " minute",
        secWord: " secunde"
      });
    });
  }
});

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