CSS+radio实现的轮播图添加JS自动轮播后手动切换触发DOMException报错

• 定时器重复创建：初始化时已为每个轮播启动了递归执行的自动轮播定时器，而每次radio的change事件（手动点击切换、自动切换都会触发）又会重新启动一个新的递归定时器，最终同一轮播实例会同时存在多个并行运行的定时器。多个定时器同时操作同组单选框的checked属性时，就会出现某一个定时器要移除某单选框的checked属性时，该属性已经被另一个定时器提前删除，从而抛出对应DOM异常。
• 缺少边界兜底判断：没有对查询到的DOM元素做非空校验，极端场景下找不到目标元素时也会触发执行异常。

替换原有JS代码为以下内容即可，核心逻辑是给每个轮播实例绑定唯一的定时器ID，每次启动新定时器前先清空旧定时器，避免多定时器冲突，同时增加边界判断兜底：

document.querySelectorAll('.carousel').forEach((carousel) => {
  // 初始化前清空已有定时器，避免重复初始化问题
  if (carousel.dataset.timerId) clearTimeout(carousel.dataset.timerId)
  animate_carousel(carousel);
  carousel.querySelectorAll("input[type='radio']").forEach((input) => {
    input.addEventListener('change', function() {
      // 手动切换时清空旧的自动轮播定时器，避免冲突
      if (carousel.dataset.timerId) clearTimeout(carousel.dataset.timerId)
      animate_carousel(carousel);
    });
  });
});

function animate_carousel(carousel) {
  const timerId = setTimeout(function() {
    const checkedRadio = carousel.querySelector('input[type="radio"]:checked');
    // 兜底：找不到选中的单选框直接终止本次执行
    if (!checkedRadio) return
    const currentIndex = parseInt(checkedRadio.dataset.index, 10)
    let nextLabel = carousel.querySelector(`label.control-${currentIndex}.next`);
    // 兜底：最后一张图时切回第一张
    if (!nextLabel) {
      nextLabel = carousel.querySelector('label.control-0.next')
    }
    const targetInput = carousel.querySelector(`input#${nextLabel.getAttribute('for')}`)
    if (targetInput) targetInput.click();
    animate_carousel(carousel);
  }, 5000, carousel);
  // 存储当前定时器ID到轮播元素的自定义属性上
  carousel.dataset.timerId = timerId
}

如果后续需要新增轮播图，只需给每个新增的单选框设置正确的data-index属性，同时给对应next label配置正确的for属性指向目标单选框ID即可正常运行。

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