JavaScript：删除事件监听器不起作用

Question

我想使用JavaScript删除事件侦听器，但似乎无法正常工作...我尝试将debounce以及showPopup函数作为参数传递给removeEventListener 。

const elementToListenForScroll = document.querySelector('.howitworks__mainheading');
const distanceToTop = elementToListenForScroll.getBoundingClientRect().top;

function debounce(func, wait = 20, immediate = true) {
  var timeout;
  return function() {
    var context = this,
        args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

function showPopup() {
  const currentScrollPosition = window.scrollY;
  if (currentScrollPosition > distanceToTop) {
    console.log('hey it works');
    window.removeEventListener('scroll', debounce);
  }
}

window.addEventListener('scroll', debounce(showPopup));

Answer 1

debounce(showPopup)与debounce 。

当仅对函数进行debounce时， debounce(showPopup)调用将执行代码。

为了能够removeEventListener您需要传递与传递给addEventListener相同的函数引用。

将debounce(showPopup)分配给某个变量，并将其用于事件订阅/取消订阅。

例：

  const elementToListenForScroll = document.querySelector('.howitworks__mainheading'); const distanceToTop = elementToListenForScroll.getBoundingClientRect().top; var realReference = debounce(showPopup); function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } function showPopup() { const currentScrollPosition = window.scrollY; if(currentScrollPosition > distanceToTop) { console.log('hey it works'); window.removeEventListener('scroll', realReference); } } window.addEventListener('scroll', realReference); 

Answer 2

window.removeEventListener需要在window.addEventListener中注册的功能。 在我们的例子中，它是debounce（showPopup）返回的函数。 保存在变量中。

var debouncedShowPopup = debounce(showPopup);

function showPopup() {
  const currentScrollPosition = window.scrollY;
  if(currentScrollPosition > distanceToTop) {
    console.log('hey it works');
    window.removeEventListener('scroll', debouncedShowPopup);
  }
}

window.addEventListener('scroll', debouncedShowPopup);

Answer 3

嗨，我在jsfiddle中做了一个简单的示例，更改了文档的窗口，以访问滚动事件。 看一下，似乎显示了您的console.log('it works')

JSF下面的代码中间镜

 const elementToListenForScroll = document.querySelector('.howitworks__mainheading'); const distanceToTop = elementToListenForScroll.getBoundingClientRect().top; console.log(distanceToTop, 'distanceToTop'); function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } function showPopup() { console.log('deboundece', window.scrollY, distanceToTop); const currentScrollPosition = window.scrollY; if (currentScrollPosition > 100) { console.log('hey it works'); document.removeEventListener('scroll', debounce); } } console.log(document); document.addEventListener('scroll', debounce(showPopup)); 

 .howitworks__mainheading { position: relative; display: block; top: 900px; } 

 <div class="howitworks__mainheading"> Any other way </div>