Как запустить функцию только один раз во вьюпорте?

Question

[masha_bunny]

пробовала так https://jsfiddle.net/4oy6zjq0/1/

тут всё так. но функция срабатывает всегда
а нужно ОДИН раз
когда блок виден во вьюпорте

сейчас когда во вьюпорте скролим, то анимация идет всегда

а нужно один раз

Answer 1

[Егор Живагин]

Используйте window.removeEventListener('scroll', ...) в тот момент, когда поймали блок во вьюпорте.

Comments

[masha_bunny]

Егор Живагин, не работает (31 строка)
https://jsfiddle.net/ob9dpyq3/

[Егор Живагин]

masha_bunny, потому что вы подписываете на скролл анонимную функцию, а отписываете от него зачем-то результат вызова функции loading :)

[Егор Живагин]

masha_bunny, поправил ваш пример -- ссылка

[Егор Живагин]

masha_bunny, именно в таких кейсах видно, что лучше не использовать анонимные функции как слушатели событий.

[masha_bunny]

Егор Живагин, так вроде функция не один раз запускается

[Егор Живагин]

masha_bunny, извиняюсь, не сохранил изменения :)
5 мин

[Егор Живагин]

masha_bunny, вот - сохранил

[masha_bunny]

Егор Живагин, ага.
но теперь если я после того как посмотрю этот блок ( с цифрами)
а потом посмотрю какой то вверхний блок или нижний
и ВЕРНУСЬ обратно - то не будет работать анимаци
это возможно поправить?

[Егор Живагин]

masha_bunny, возможно, я думаю. Но тут я не помогу, у меня нет столько времени

[masha_bunny]

Егор Живагин, всё ок. спасибо