jquery - 仅运行一次 window.addEventListener 函数

Question

我有这个函数，当我滚动到它时会运行视频:

var _video = document.getElementById('video-one');

function isScrolledIntoView(element) {
  var elementTop = element.getBoundingClientRect().top,
    elementBottom = element.getBoundingClientRect().bottom;

  return elementTop >= 0 && elementBottom <= window.innerHeight;
}

window.addEventListener("scroll", function() {
  if (isScrolledIntoView(_video)) {
    _video.play();
  }
});

问题是，在视频停止后我滚动并返回到它 - 它再次运行。但我只需要它运行一次，仅在我第一次滚动到它时运行。我尝试将函数标记为运行一次，但它不起作用:

var _video = document.getElementById('video-one');

function isScrolledIntoView(element) {
  var elementTop = element.getBoundingClientRect().top,
    elementBottom = element.getBoundingClientRect().bottom;

  return elementTop >= 0 && elementBottom <= window.innerHeight;
}

var started = false;
if (!started) {
  window.addEventListener("scroll", function() {
    if (isScrolledIntoView(_video)) {
      _video.play();
    }
  });
  started = false;
}

我做错了什么？

Answer 1

我们必须传递完全相同的参数，以防删除事件监听器。这个方法已经可以解决问题了。原因是removeEventListener从处理程序的参数列表中获取它的所有参数。

<小时/>

我已将 eventPhase 更改为 TRUE 并且它有效。

window.addEventListener('scroll', function(e){
    if (isScrolledIntoView(_video)) {
        _video.play();
        this.removeEventListener(e.type,arguments.callee,e.eventPhase);
    }
}, true); // CHANGED HERE!!!!