Событие scroll всегда вызывается дважды, как устранить дублирование?

Question

[Alex657913]

Приветствую. Пытаюсь реализовать инфинити скролл для сообщений чата. Массив сообщений загружается в div, для обратной хронологии используется flex-direction: column-reverse. При прокрутке вверх, как только ползунок попадает в верхнюю зону, срабатывает загрузка сообщений. Привожу фрагмент кода,

<div style={{ display: 'flex', flexDirection: 'column-reverse', height: '100%', overflow: 'auto', scrollbarWidth: 'thin' }}
           onScroll={(e) => {
                e?.stopPropagation();
                 let height = e.target?.scrollHeight + e.target?.scrollTop - window.innerHeight;
                 if (height < 50) {                         
                      alert(height);
                      //loadRows();                    
                }
           }}
    > 
   { msgs.map( ....) }
</div>

Сейчас в качестве примера вместо загрузки alert, StrictMode отключен. Событие onScroll при одном движении скролла срабатывает всегда 2 раза. Что может являться причиной?

Comments

[Kentavr16]

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

[shsv382]

onScroll и должно срабатывать много раз. Но как я понимаю, тебе нужно, чтобы меньше запросов на сервер улетало. Сделай флаг, чтобы отслеживать состояние запроса

const [isLoading, setLoading] = useState(false) // возможно у тебя такое уже есть, может даже в state management

// ... 
if (height < 50 && !isLoading) {           
                      setLoading(true)            
                      alert(height);
                      //loadRows();          
                      setLoading(false)          
                }
// ...

[WbICHA]

А вообще для этой задачи лучше обсервер использовать.

[Alex657913]

WbICHA, использовал все что только можно .... Этот вариант, который я привел, прямо скажем так себе .....например, он учитывает попадание в зону срабатывание, но не направление и пр. Суть не в этом. Я не могу понять почему событие двойными вызовами идет. И нигде нет инфы, 100-пудово это какая-то типично реактовская приблуда. Как ее "прибить", вот в чем вопрос?

[Alex657913]

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

[WbICHA]

Alex657913,

использовал все что только можно ....

Но лучше использовать предназначенные для этого инструменты.

Я не могу понять почему событие двойными вызовами идет.

Залогай height и посмотри сколько раз он меньше 50.

И выше тебе уже написали что надо сделать в любом случае: дебоунс. Он тут нужен в любом случае внезависимости от решения.

[Alex657913]

Думал, что событие срабатывает на начале или завершении, судя по док-ции, практически во всех браузерах оно срабатывает тактами, серией событий на каждый сдвиг. Просто если использовать как заглушку алерт, то срабатывает два раза, на консоль.лог уже 6 раз. Поэтому, да, видимо нужен таймер с какой-то визуальной "вертушкой" и вероятно вернусь к варианту intersection observer.
Всем спасибо.