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

Я хотел бы удалить прослушиватели событий с помощью 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.info('hey it works');
    window.removeEventListener('scroll', debounce);
  }
}

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

java !== javascript

— 06.02.2019 12:39

извините, не заметил :)

— 06.02.2019 12:50

Разве не так? window.removeEventListener('scroll', showPopup); Функции, которые вы передаете, кажутся разными.

— 06.02.2019 12:55

подумайте об удалении прокрутки событий в окне... Звучит странно

— 06.02.2019 12:58

@Mr.Polywhirl похоже, что нет, потому что addEventListener принимает функцию debounce в качестве аргумента, поскольку сама функция debounce вызывает функцию showPopup.

— 06.02.2019 12:58

@ ÁlvaroTouzón, как бы вы это реализовали иначе?

— 06.02.2019 12:59

что нужно для удаления события прокрутки?

— 06.02.2019 13:01

javascript addeventlistener debouncing removeeventlistener

06.02.2019 12:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

738

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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.info('hey it works');
        window.removeEventListener('scroll', realReference);
      }
    }
    
    window.addEventListener('scroll', realReference);

06.02.2019 12:57

window.removeEventListener ожидает функцию, зарегистрированную в окно.addEventListener. В нашем случае это функция, возвращаемая debounce(showPopup). Сохранить в переменной.

var debouncedShowPopup = debounce(showPopup);

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

window.addEventListener('scroll', debouncedShowPopup);

06.02.2019 12:59

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

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

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

console.info(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.info('deboundece', window.scrollY, distanceToTop);
  const currentScrollPosition = window.scrollY;
  if (currentScrollPosition > 100) {
    console.info('hey it works');
    document.removeEventListener('scroll', debounce);
  }
}
console.info(document);
document.addEventListener('scroll', debounce(showPopup));

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

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

06.02.2019 13:01

Другие вопросы по теме

Как добавитьEventListener к каждому элементу класса

Как исправить [Вмешательство] Игнорируемая попытка отменить событие touchmove с cancelable=false, например, из-за того, что прокрутка выполняется и не может

Использование window.confirm вместо onbeforeunload

Javascript MVC, addEventListener не может быть прикреплен к элементу dom

Window.addEventListener в сообщении, отправленном из iframe

Javascript перезагружает addEventListner при создании динамических кнопок

Можно ли прикрепить много прослушивателей событий?

AddEventListener: нажмите и удалите тег

Как реализовать события, которые показывают следующую страницу после нажатия на нее?

Создание межбраузерной совместимости addEventListener с IE8 и более ранними версиями

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

Ответы 3

Другие вопросы по теме

Похожие вопросы