Question

我想使用JavaScript删除事件侦听器，但似乎不起作用...我尝试将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="in" value="18px"/> <div id="out">this is my output</div> <script> $('#in').on('keyup', function () { $('#out').css({'font-size':$(this).val()}); }); </script>和debounce函数作为参数传递给showPopup。 / p>

removeEventListener

Answer 1

debounce(showPopup)与debounce不同。

debounce(showPopup)调用在debounce仅引用该函数时执行代码。

要能够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')

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：删除事件监听器不起作用

3 个答案: