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

Question

[romaro]

Я делаю поблочную подгрузку страницы: когда на экране появляется последний тизер товара, должна появиться кнопка "Показать еще".

Сейчас на событии scroll висит такой обработчик:

_checkingVisible() {
        const coordinates = this.lastChild.getBoundingClientRect();

        if (window.innerHeight > coordinates.bottom) {
            console.log('Server response...');
        }
    }

Соответственно, когда прокрутка доходит до последнего тизера, нужно однократно обратиться к серверу. Как это лучше реализовать? Я пока вижу два пути:

1) Добавить глобальный флаг isRequest и активировать его при переходе в функцию запроса к серверу. Снимать флаг после того, как пользователь кликнет по кнопке "Показать еще" и отобразится новый блок тизеров. При наличии флага не вызывать функцию запроса к серверу.
2) Снимать слушателя с события прокрутки на время выполнения запроса к серверу и, аналогично, возвращать его после того, как пользователь кликнет по кнопке, чтобы раскрыть новый блок.

Есть ли более изящный вариант?

Answer 1

[zkrvndm]

Используй Intersection Observer API:
developer.mozilla.org/ru/docs/Web/API/Intersection...
Как только кнопка показать еще попадает в область видимости, то грузишь посты.
Разумеется необходимо предусмотреть блокировку повторного вызова на время загрузки постов.

Intersection Observer API позволяет указать функцию, которая будет вызвана всякий раз для элемента (target) при пересечении его с областью видимости документа (по умолчанию) или заданным элементом (root).