在DOM中动态创建video元素出现重复实例问题如何解决？

问题原因 #

• timeupdate 是视频播放过程中高频触发的事件，每秒会触发4~6次，当视频播放进度达到1秒后，该事件会在第一个视频被移除前连续触发多次，每次触发都会执行你写的创建第二个视频的逻辑。
• 你设置的step2 = true之后，后续所有触发的timeupdate事件都会命中判断条件，反复执行创建插入代码。
• 代码没有做重复创建校验，只要触发条件满足就直接生成新的视频元素插入DOM。

修复方案 #

核心解决思路是阻止满足条件后的逻辑重复执行，修复点如下：

1. 给事件回调命名，执行逻辑后第一时间移除事件监听，从根源避免重复触发
2. 增加视频元素存在性校验，双重防止重复生成
3. 额外增加enter函数调用的防重判断，避免多次调用enter导致重复创建第一个视频

修复后代码：

function enter() {
  // 防止enter被多次调用重复创建第一个视频
  if (document.getElementById('vdd')) return
  var video = document.createElement("video");
  video.type = "video/mp4";
  video.src = "../images/myMovie.mp4";
  video.autoplay = true;
  video.muted = true;
  video.id = "vdd"
  document.body.appendChild(video);

  // 命名事件回调，方便后续移除监听
  function handleTimeUpdate() {
    if(this.currentTime >= 1) {
      // 先移除事件监听，避免后续重复触发
      this.removeEventListener('timeupdate', handleTimeUpdate)
      this.pause();
      this.remove();
      
      // 防止重复创建第二个视频
      if (document.getElementById('vdd1')) return
      document.getElementById("cnn").style.display = "inline"
      console.log("Test 1");

      const x = document.createElement("video");
      const brr = document.createElement("div");

      x.type = "video/mkv";
      x.src = "../images/space.mkv";
      x.autoplay = true;
      x.muted = true;
      x.id = "vdd1"
      
      brr.appendChild(x);
      const currentDiv = document.getElementById("cnn");
      currentDiv.appendChild(brr);
    }
  }

  video.addEventListener("timeupdate", handleTimeUpdate);
}

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