如何重构这段 Javascript 代码以使其更加模块化和简洁？

Question

var vid1 = document.getElementById("v1");
var vid2 = document.getElementById("v2");
var vidArr = [vid1,vid2];

var tempListener1 = function checkViewA(){
    if(elementInView(vid1)){
        playVideo(vid1);
        window.removeEventListener('scroll', tempListener1); // so the video only plays once
    }
}

var tempListener2 = function checkViewB(){
    if(elementInView(vid2)){
        playVideo(vid2);
        window.removeEventListener('scroll', tempListener2);
    }
}

// scroll event listeners
window.addEventListener('scroll', tempListener1);
window.addEventListener('scroll', tempListener2); 

// this plays the video
async function playVideo(v){ 
    v.play();
}

我希望能够继续添加在视图中播放的视频，而无需继续添加变量、事件侦听器。在 javascript 中，您不能删除具有带参数的函数的侦听器，这就是我将它们放入变量的原因。欢迎任何见解。

Answer 1

首先获取 Set 中所有视频元素的集合，然后添加一个 single 滚动监听器。当侦听器运行时，迭代 Set。每当找到正在观看的视频时，播放它并将其从 Set 中删除：

const videos = new Set(document.querySelectorAll('video'));
window.addEventListener('scroll', () => {
  for (const video of videos) {
    if (elementInView(video)) {
      video.play();
      videos.delete(video);
    }
  }
});