Как удалить Event Listener в Javascript?

Question

Я пытаюсь реализовать ленивую прокрутку в моем скрипте, и она работает хорошо, пока не достигнет конца, и я хочу помешать ей делать дополнительные запросы.

Я добавил слушатель события в свой код, используя:

window.addEventListener("scroll", _.throttle(checkScroll, 500));

Однако, когда я пытаюсь удалить его, он все равно продолжает слушать и воздействовать на событие.

Я пробовал:

if (json.articles.length == 0) {
                $(".articles").append("<br>That's all folks!");
                window.removeEventListener("scroll", _.throttle(checkScroll, 500));
}

и

if (json.articles.length == 0) {
                $(".articles").append("<br>That's all folks!");
                window.off("scroll");
}

, но ни один из них не работает.

Answer 1

Вы можете добавить обработчик событий в jQuery с помощью on и удалить его с помощью off. Вот скрипка , чтобы проиллюстрировать это.

$(window).on('scroll', function(ev) { //add handler
    ...
})

$(window).off('scroll', function(ev) { //remove handler
    ...
})

Answer 2

Если вы добавляете прослушиватель событий с использованием простого Javascript, единственный способ удалить его - сохранить ссылку на результат вызова _.throttle, который вы передаете addEventListener:

const handler = _.throttle(checkScroll, 500);
window.addEventListener("scroll", handler);
// ...
window.removeEventListener("scroll", handler);

Вы можете сделать что-то вроде window.off('scroll'), только если добавите обработчик с помощью jQuery (например, $(window).on(...), а затем $(window).off(...)).Если вы добавите обработчик с Javascript, jQuery off не будет использоваться.