Как избежать множественного использования скрипта?

Question

[Gias]

Здравствуйте. Столкнулся с проблемой... На локальном сервере всё отлично, но при задержках, скрипт используется по 5-6 раз, без обновления переменных... Судя по всему, не выполняется даже начало кода... Так как пробовал сразу запретить дальнейшее выполнение...

var block1 = document.getElementById('infinite-scroll');
var timeout1;

block1.addEventListener("scroll", function(){
    if (timeout1 != null) {
    clearTimeout(timeout1)};
    timeout1 = setTimeout(scroll__load, 500)});

scroll__load = function(){
        var blockheight = block1.offsetHeight;
        var contentheight = block1.scrollHeight;      // 1) высота блока контента вместе с границами
        var scrolltop       = block1.scrollTop;      // 2) текущее положение скролбара

        var y             = contentheight - scrolltop;
        
        // если пользователь достиг конца
        if(y <= blockheight * 1.5)
        {
            //загружаем новое содержимое в элемент
            scroll_load();
        }
 };

 var i = 32;
 var i_old;

 scroll_load = function() {
    if (i_old != i) {
        console.log(i);
        var params = 'zapros='+i+'';
        var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200)    {
                    block1.insertAdjacentHTML('beforeend', xmlHttp.responseText);
                    i_old = i;
                    i = i+6;

                    filtrus();
                }
            }
            xmlHttp.open("POST", "php/scroll__load.php");
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.send(params);
    }
}

Comments

[WbICHA]

Ужас. Это какого года код?

[Gias]

А что посовременней есть?

[Gias]

debounce не помогает... параллельно по 2-6 запросов запускает...

[Владислав]

Я не совсем понял, что делает код:

if (timeout != null) {
  clearTimeout(timeout);
}

Переменная timeout не объявлена. Насколько я понял, должно было быть так.

let timeout = null;
if (timeout != null) {
  clearTimeout(timeout);
}
open__kod__timer = function () {open__kod = 1};
timeout = setTimeout(open__kod__timer, 1000);

Также, может быть ошибка в строке:
setTimeout(open__kod__timer, 1000)};

Фигурная скобка закрывает if.
Если вы вдруг не знаете, есть инструмент https://prettier.io/docs/en/index.html

Я перепишу код, мне сложно так понять до конца, что нужно сделать.
Напишите описание задачи.

[Владислав]

aspirantes, возможно, вам нужно это https://tsh.io/state-of-frontend/

Я только не знаю, как это согласуется со стеками отечественных компаний.

[Gias]

Извините, за ошибки... Попробовал просто много всего уже... И не полностью восстановил, перед отправкой, код.

[Gias]

Владислав Савченко, Попробовал на всякий случай приравнять let timeout = null;
if (timeout != null). Не помогло. Суть проблемы в том, что параллельно 2 скрипта запускается и переменные не успевают меняться, но потом эти переменные меняются дважды... То есть "i" перескакивает диапазон, хотя по условию, этот скрипт не должен выполняться, пока "i" такая же...

[Gias]

Владислав Савченко, задача, при скроллинге отправить запрос в php на догруз контента.

[Gias]

Владислав Савченко, Благодарности... Разъясняя задачу, дошло что "i_old" не успевала меняться, перенес "i__old" в начало скрипта, и теперь всё четко.... Но это не решило проблему с множественными скриптами от скролла...

[Владислав]

aspirantes, моя помощь больше не нужна?

Я еще заметил, что переменная scroll__load первый раз передается в setTimeout как undefined.

[Владислав]

aspirantes, еще, как я понял, i и i_old никогда не равны. Сейчас напишу примерно, как можно обойти повторное выполнение запроса.

[Владислав]

aspirantes,

const block1 = document.getElementById('infinite-scroll');
let timeout1 = null;
let i = 32;
let isLoading = false;
let isEmpty = true;

function scroll__load() {
  const blockheight = block1.offsetHeight;
  const contentheight = block1.scrollHeight;
  // Высота невидимой, прокрученной в данный момент, части элемента сверху
  const scrolltop = block1.scrollTop;

  const y = contentheight - scrolltop;

  // «Схлопнутый» элемент, например пустой div без высоты и ширины, будет считаться невидимым. И offsetHeight 0
  // Но сделаем проверку на пустоту элемента надежной

  // если пользователь достиг конца
  if (isEmpty || y <= blockheight * 1.5) {
    //загружаем новое содержимое в элемент
    scroll_load();
  }
}

function filtrus() {
  console.log(filtrus.name)
}

function scroll_load() {
  if (!isLoading) {
    isLoading = true;
    console.log(i);
    const params = 'zapros=' + i + '';
    const xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        block1.insertAdjacentHTML('beforeend', xmlHttp.responseText);
        i = i + 6;
        isLoading = false;
        isEmpty = false;

        filtrus();
      }
    };
    xmlHttp.open('POST', 'php/scroll__load.php');
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlHttp.send(params);
  }
}

block1.addEventListener('scroll', function() {
  if (timeout1 != null) {
    clearTimeout(timeout1);
  }
  timeout1 = setTimeout(scroll__load, 500);
});

Предупреждаю, код не запускал.
Если не используете babel, замените let и const на var.

[Gias]

Владислав Савченко, Спасибо большое... Вопрос решил... Но проблема со скроллом осталась... Она не видна, но знать про неё болезнено ) Решил похожим способом... Вы добавили "isLoading = true;" в начале скрипта... А у меня переменная стояла после ajax запроса.

var block1 = document.getElementById('infinite-scroll');
var i = 32;
var i_old;
var scrolltop__old = 0;

scroll_load = function() {
    if (i_old != i) {
        i_old = i;
//        console.log(i);
        var params = 'zapros='+i+'';
        var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200)    {
                    block1.insertAdjacentHTML('beforeend', xmlHttp.responseText);
                    i = i+6;

                    filtrus();
                }
            }
            xmlHttp.open("POST", "php/scroll__load.php");
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.send(params);
    }
}

scroll__load = function(){
    var contentheight = block1.scrollHeight;      // 1) высота блока контента вместе с границами
    var scrolltop = block1.scrollTop;      // 2) текущее положение скролбара

    var y = contentheight - scrolltop;
    
    // если пользователь достиг конца
    if(scrolltop > contentheight*0.5 && scrolltop > scrolltop__old) {
//        console.log(''+scrolltop+' > '+contentheight*0.5+''+'----'+scrolltop__old+'');
        scrolltop__old = scrolltop;
        //загружаем новое содержимое в элемент
        scroll_load();
    }
};

if (document.getElementById('infinite-scroll') != null) {
block1.addEventListener("scroll", scroll__load);
};

[Владислав]

aspirantes, Если нет срочности, я посмотрю примерно через час, как решить проблему со скроллингом.

[Gias]

Владислав Савченко, это не срочно, но проблема скорее всего не решаема... Тут думаю из-за того, что скроллит на несколько строк сразу, от этого и запускается несколько скриптов сразу, в моем случае 6 - 6 строк...

[Владислав]

aspirantes, Вы решаете эту задачу для кого-то или для себя?
У проблемы есть решение, я поищу в production-ready коде.

[Владислав]

aspirantes, Пока что скидываю репозиторий https://github.com/tannerlinsley/react-virtual
Немного позже объясню их код.

[Gias]

Владислав Савченко, Для себя. Но доп контент не ставлю... Если собрать в кучу все проблемы которые можно было решить с помощью фреймворков и утилит, уже размер сайта перевалил бы за гиг наверное ) jquery bootstrap laravel и т.д. Всё решается java scriptom, а что не решается, то скрывается в фреймворках. В данном случае, скролл так же будет дублироваться (просто скроется, так как скрыли мы (хорошо, если ещё не хуже)). Ну и сайт пока весит 100кб с иконками svg. Ну и сколько раз уже хотел поставить тот же jquery (не мог найти нужного решения), но когда находил решение в чистом js, всё оказывалось куда понятней и динамечней. Возможно просто ещё рано библиотеками сторонними пользоваться, так как на чистом js ещё всего не знаю...

[Владислав]

aspirantes,
"Если мой эксперимент идет предсказуемым путем, то я в действительности не узнал ничего нового. Если мой эксперимент идет неправильно, то я изучаю что-то очаровательное и новое, и могу открыть огромные области для открытий". Советую посмотреть https://www.youtube.com/watch?v=hjIlTaAMsbI целиком.

Но, конечно, "Если вы не используете его, вы его потеряете. По мере продвижения по карьерной лестнице я часто обнаруживаю, что больше пишу, говорю, наставляю и меньше кодирую. Вам нужно сохранять свои навыки отточенными. Мой любимый способ практики - работать над побочными проектами, исходя из ваших интересов. Выбирайте что-то, исходя из ваших интересов, чтобы оставаться мотивированным и стремиться улучшить это как можно больше. Я увлекаюсь музыкой, поэтому создал приложение для торговли виниловыми пластинками. Другой вариант - внести свой вклад в открытый исходный код." Это цитата из книги SOLID https://khalilstemmler.com

Советую посмотреть ответ на мой вопрос https://qna.habr.com/q/947705?e=10906789#answer_it...

И я стараюсь придерживаться книги https://www.scotthyoung.com/blog/ultralearning/ Ultralearning.

Объекты обучения, конечно, зависят от конечной цели - фриланс или Frontend Engineer.

Из этой библиотеки я хотел бы выделить конкретно код, который решает проблему бесконечного скроллинга. Я не решал эту проблему никогда, но, заглянув в код, я, например, уже вижу вещи, о которых я не знал. Например, https://github.com/tannerlinsley/react-virtual/blo...
Эти знания удобно будет сохранить куда-нибудь, чтобы потом сразу использовать. Я использую для этих целей https://www.notion.so

[Gias]

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

[Владислав]

aspirantes,

1. Я посмотрел, является ли кроссбразуреным scrollHeight - да, и подтверждает это https://caniuse.com/mdn-api_htmlelement_offsetheight .

Также, может быть, вам будет интересно, "All of the offset dimension properties are read-only and are calculated each time they are accessed. Therefore, you should try to avoid making multiple calls to any of these properties; instead, store the values you need in local variables to avoid incurring a performance penalty".

Это на случай, если вы не делали еще это.

2. Вычисления в той сторонней библиотеке весьма запутанные, так что нет смысла тратить на их понимание дополнительное время.

3. https://www.youtube.com/watch?v=vNB39FhqJCY (здесь второй эпизод) и https://www.engineeringwithutsav.com/blog/how-to-p... Если не смотрели, вам будет интересно.

[Владислав]

aspirantes,

Я пока не смог вникнуть, что конкретно не работает должным образом.

Если в вашем плане обучения есть "Уметь решать данную задачу", я помогу.
Если ваша цель попрактиковаться с JS DOM, Ajax, problem solving, а получение решения для данной задачи не является целью, то в моем решении, очевидно, нет смысла.

[Владислав]

aspirantes, мое мнение, основанное на небольшом (!) опыте, за неимением в данный момент других мнений, получение решения для этой оставшейся проблемы не имеет большой ценности как цель.

[Gias]

Владислав Савченко, здесь сам scroll применяется множество раз... Все обходные решения направлены на скрытие данного факта... Так, как изначально решили проблему, с множественным использованием скрипта, самый лучший вариант... Всё остальное, как по мне, вводит в заблуждение. Так что тот вариант можно считать ответом. Надо было просто переменную вынести в начало скрипта, но сколько пришлось перелопатить информации для этого xD

[Владислав]

aspirantes, ясно, тогда да)