Запустите функцию 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

Мы должны передать точно такие же аргументы в случае удаления eventListener. Этот метод должен решить проблему. Причина в том, что removeEventListener берет все свои аргументы из списка аргументов обработчика.

---

Я изменил eventPhase на TRUE, и он работает.

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

Answer 2

Поскольку вы пометили это как "jquery" (хотя я не вижу jquery код), я дам вам jquery ответ:)

function videoScroll() {
    if ($('#video-one').visible(true)) {
        videoPlay();
    }
}

function videoPlay() {
    $(window).off("scroll", videoScroll());
    $("#video-one").play();
}

$(window).on("scroll", videoScroll());