时间戳

首页 > 解决方案 > 只运行一次 window.addEventListener 函数

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

问题描述

我有这个功能，当我滚动到它时会运行一个视频：

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;
}

我究竟做错了什么？

标签： jquery

解决方案

我们必须传递完全相同的参数以防删除 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!!!!

推荐阅读