Как изменять стейт 1 раз при прокрутке в конец страницы?

Question

[Gimir]

const updateContent = throttle(() => {
    let updated = false;
    if ((window.scrollY + window.innerHeight) === document.body.clientHeight) {
      window.scrollTo({top: 0, behavior: 'instant'});
      setCurrentPage(prevPage => {
        console.log('UPDATED!!!');
        return prevPage+1;
      });
    };
  }, 1000);
//--------------------
window.addEventListener('scroll', updateContent);

Задача сделать что-то наподобие пагинации, но не переходить на следующую страницу а обновлять уже существующий контент.
Я написал такую функцию, которая при скролле в конец страницы по идее должна обновить стейт (хук useState) 1 раз, и прокрутить в начало страницы. На деле стейт обновляется несколько раз. Как сделать так чтобы это работало как надо? Может есть какие-то best practices?

Answer 1

[Владимир Мальцев]

Введите переменную для определения статуса загрузки

var is_loading_page = false;

// в обработчике скролинга
if (is_loading_page) return false;
is_loading_page = true;

// в калбеке получения новой страницы (через AJAX например)
is_loading_page = false;

Comments

[Gimir]

Так и сделал. Хотел с самого начала это сделать, но потом подумал: не будет ли это слишком топорно? И решил задать вопрос знающим)
Конечный вариант:

const updateContent = throttle(() => {
    let updating = true;
    if (window.scrollY === 0) updating = true;
    if ((window.scrollY + window.innerHeight) === document.body.clientHeight) {
      if (updating) {
        window.scrollTo({top: 0, behavior: 'instant'});
        setCurrentPage(prevPage => {
          console.log('UPDATED!!!');
          return prevPage+1;
        });
        updating = false;
      }
    };
  }, 300);

[Владимир Мальцев]

Gimir, не всегда топорные решения не правильные)) Это самый простой и надежный способ. Единственное лучше updating = false в калбеке делать по setTimeout через секунду (или пол секунды), на всякий пожарный))

Answer 2

[MamaLuyba]

скорее всего так происходит потому, что event реагирует на прокрутку колесика и, соответственно, т.к. несколько прокруток будут иметь одинаковые значения высоты окна - функция и отработает несколько раз. но это не точно.
можно попробовать удалять eventListener после первого срабатывания, а при скролле в начало страницы - вновь добавлять.

Comments

[Gimir]

Сделал как вы сказали и все заработало нормально. Но так как у меня eventListener добавлялся в хуке useState, решил сделать с помощью переменной updating, вот так:

const updateContent = throttle(() => {
    let updating = true;
    if (window.scrollY === 0) updating = true;
    if ((window.scrollY + window.innerHeight) === document.body.clientHeight) {
      if (updating) {
        window.scrollTo({top: 0, behavior: 'instant'});
        setCurrentPage(prevPage => {
          console.log('UPDATED!!!');
          return prevPage+1;
        });
        updating = false;
      }
    };
  }, 300);