Блог

Я пытаюсь создать функцию бесконечной прокрутки с помощью IntersectionObserver. Когда вызывается обратный вызов, я провожу тест, чтобы увидеть, происходит ли какая-то загрузка, и если да, то я хочу отменить этот новый вызов. Функция заключается в том, что:

 const loadMore = useCallback(() => {    
    if (loading) {
      return
    } 

    setLoading(true);
    
    console.log('Loading');
    setTimeout(() => {
      console.log('Finished');
      setLoading(false);
    }, 5000); 
  }, []);
 

Проблема в том, что когда наблюдатель loadMore снова вызывает, и в этот момент происходит загрузка, loading состояние иногда имеет старое значение (false), и setTimeout вызывается снова, даже если выполняется другой. Если я помещаю loading в массив зависимостей, функция вызывается много раз (в цикле), потому что я изменяю ее значение внутри нее. Я попытался использовать имя пользователя для управления загрузкой, оно работает в функции, но я также хочу использовать loading укажите в JSX, показывать или нет текст, но с переменной useRef это не работает в JSX, и я нахожу немного некрасивым использовать две переменные для управления почти одним и тем же. Есть ли способ сделать это только с государством?

Код наблюдателя:

 useEffect(() => {
    const options = {
      root: null,
      rootMargin: '10px',
      threshold: 1.0
    }

    const observer = new IntersectionObserver(loadMore, options);

    if (loaderRef amp;amp; loaderRef.current) {
      observer.observe(loaderRef.current);
    }
  }, [loadMore]);