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(showPopup) 调用在 debounce 仅引用函数时执行代码。

为了能够 removeEventListener，您需要传递与传递给 addEventListener.

相同的函数引用

将 debounce(showPopup) 分配给某个变量并将其用于事件 subscription/unsubscription。

示例：

    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 中做了一个简单的示例，更改了文档的 window，以访问滚动事件。看一看，好像显示了你的console.log('it works')

JSFiddle mirror of code below

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>

JavaScript: 删除事件侦听器不工作

JavaScript: remove event listener not working

javascript

addeventlistener

debouncing

removeeventlistener