Как остановить, завершить обработчик событий eventListener JS?

Question

[Rob1n Bobin]

Всем привет. Не нашел внятной информации по этой теме, точнее того что мне нужно не найти.
Есть обработчик:

let animatedArr = document.querySelectorAll('[data-animated]');
		
		for(let i = 0; i <= animatedArr.length - 1; i++) {
			
			let animatedElem = animatedArr[i];
			
			document.addEventListener('scroll', function () {
				
				let scroll = window.pageYOffset || document.documentElement.scrollTop;
				
				if(scroll >= animatedElem.offsetTop){
					
					animatedElem.classList.add('animated');
				}
				
			})
			
		}

Comments

[Павел Корнилов]

Обработчик в цикле? Это же сколько обработчиков будет на document? А потом их все удалять???
Лучше опишите задачу, которую пытаетесь решить.

Answer 1

[Илья Герасимов]

Зачем вы в цикле многократно слушаете одно и тоже событие?
Код должен выглядеть как-то так:

function handleScroll(scrollTop) {
	for(let i = 0; i <= arr.length - 1; i++){
		if (условие && scrollTop > 150) {
			arr[1].classList.add('class');
		} else if (условие) {
			arr[1].classList.remove('class');
		}
	}
}

document.addEventListener('scroll', handleScroll);

// в случае ухода со страницы или больше ненужно актуальное значение scrollTop стоит убрать ненужные действия
document.removeEventListener("scroll", handleScroll);

Comments

[Илья Герасимов]

Rob1n Bobin, тогда наверное как-то так

for(let i = 0; i <= arr.length - 1; i++) {
	const handleScroll = function(scrollTop) {
    if(условие) {
			arr[i].classList.add('class')
			//здесь я хочу убрать этот обработчик
        arr[i].removeEventListener(handleScroll);
    }
	}

  arr[i].addEventListener('scroll', handleScroll);
}

[Rob1n Bobin]

Т.е. при каждом скролле у меня будет всегда по новой проходить весь луп? У меня больше 40 элементов.

[Илья Герасимов]

Rob1n Bobin, по вашему примеру я предполагаю что каждый элемент сам по себе содержит свой скролл и мы слушаем их по отдельности и так же я предполагаю что событие вешается на элемент единожды, если я ошибся с представлением и допустим у вас элементы не содержат своих скроллов, то достаточно будет одного слушателя из моего первого примера, как оптимизировать додумывайте сами, потому что я не особо понимаю что вы хотите сделать

[Rob1n Bobin]

Я поправил исходный вопрос.

[Илья Герасимов]

Rob1n Bobin, по текущему вопросу самый первый (мой) вариант подойдет, да мы будем проходить циклом по элементам каждый раз когда срабатывает событие scroll, мы можем доработать обработчик и например проходить только по тем элементам, которые не анимированы, мы можем организовать задержки например в 100-200ms и не дергать обработчик слишком часто ну и оффнуть обработчик, когда все элементы отыграли и в нет нет больше нужды

[Rob1n Bobin]

Илья Герасимов, Спасибо большое, за уделенное время!

Answer 2

[Andrey Perov]

https://www.w3schools.com/jsref/met_element_remove...

document.removeEventListener("scroll", myCallback);

Comments

[Rob1n Bobin]

Немного не понимаю, я вешаю обработчик и сразу его удаляю? Когда же ему работать?

[Andrey Perov]

Rob1n Bobin, удаляешь его, когда тебе надо. Я направил на верное решение, а когда удалять тебе решать самому

Answer 3

[Alex]

Не создавайте необходимости удалять eventListener, это усложняет понимание и ведёт к ошибкам, просто укажите однократный вызов

element.addEventListener('click', myClickHandler, {
  once: true
});

Comments

[Сергей delphinpro]

А если нужен не однократный, а, допустим трехкратный?

[Rob1n Bobin]

Это для меня новый способ, буду знать, но мне не подходит, обработчик действует только один раз. Т.е. scroll действует только один раз, не доходя до нужного момента

Answer 4

[Павел Корнилов]

for(let i = 0; i <= arr.length - 1; i++){
  arr[i].addEventListener('scroll', function(){
    if(условие){
     arr[i].onscroll= function() {
     	return false;
     }
     //здесь я хочу убрать этот обработчик
    }
  })
}

Способ не изящный, но без представления о задаче, по заданным исходникам, работать будет.

Comments

[Rob1n Bobin]

Так а это и есть вся задача, просто я подумал, что не хорошо вешать 40+ обработчиков и их не прерывать если они уже не нужны, и оказалось странным, что эта тема как-то не разъясняется.

[Павел Корнилов]

Так сработал способ?