JavaScript: удалить прослушиватель событий не работает - PullRequest
Новая
       23

JavaScript: удалить прослушиватель событий не работает

0 голосов
/ 06 февраля 2019

Я хотел бы удалить прослушиватели событий, используя 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));

Ответы [ 3 ]

0 голосов
/ 06 февраля 2019

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);
0 голосов
/ 06 февраля 2019

Привет, я сделал простой пример в jsfiddle, изменив окно для документа, чтобы получить доступ к событию прокрутки.Посмотрите, кажется, покажите ваше console.log('it works')

JSFiddle зеркало с кодом ниже 

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>
0 голосов
/ 06 февраля 2019

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);
...