Как выполнить ajax-вызов после того, как скроллер достигнет дна

Question

Я исправляю работу над отложенной загрузкой для 200 массивов объектов, и мне предоставляются API для извлечения JSON с сервера (путем передачи индекса, количества строк в качестве параметра для получения AJAX и получения ответаданные и логическое значение, есть ли еще строки или нет).Но проблема в том, что изначально я смог получить данные 10 из 200, но пока я установил функцию прокрутки на div, она отображает дубликаты данных, которые уже добавлены на div.Застрял в этой проблеме на один день.

Надеюсь, вы, ребята, пролили немного света на меня.

var listgen = (function() {

  var mc = {};
  mc.startindex = 1;
  mc.rowcount = 10;
  mc.hasmorerows = false;
  mc.entity = "requests"

  //Declared variables:

  mc.initComponent = function() {
    var entity = "requests";
    mc.callAjaxForList(mc.entity, mc.startindex, mc.rowcount);
    $("#reqbody").on('scroll', function() {
      if (mc.hasmorerows && ($(this)[0].scrollHeight <= $(this).scrollTop() + $(this).innerHeight())) {
        console.log('reached')
        mc.callAjaxForList(mc.entity, mc.startindex, mc.rowcount);
      }
      console.log("scroll");
    })

  }
  mc.callAjaxForList = function(entity, startindex, rowcount) {
    var options = {
      "list_info": {
        "row_count": rowcount,
        "start_index": startindex
      }
    }
    $("#reqbody").addClass("loading");
    $.ajax({
      url: "/data/" + entity,
      data: {
        "input_data": JSON.stringify(options)
      },
      contentType: "application/json; charset=utf8",
      type: "GET",
      success: function(json) {
        mc.hasmorerows = json.list_info.has_more_rows
        mc.onDataLoading(json);

      },
    });
  }

  mc.onDataLoading = function(json) {
    //this is where i  append the data from the json
    mc.startindex += mc.rowcount
  }

  return mc;
})()

listgen.initComponent();

Answer 1

Прокрутка - это очень частое событие, поэтому я думаю, что у вас есть несколько вызовов ajax с одними и теми же данными, прежде чем на самом деле вызывается onDataLoading, и диапазон увеличивается.Поэтому я бы добавил мьютекс.

  // ... 
  mc.loaging = false; // mutex

  $("#reqbody").on('scroll', function(){
      if(mc.hasmorerows && ($(this)[0].scrollHeight<=$(this).scrollTop()+$(this).innerHeight())){
          console.log('reached')
          if (!mc.loading) // add check here
             mc.callAjaxForList(mc.entity,mc.startindex,mc.rowcount);
      }
       console.log("scroll");
      })
  }
   mc.callAjaxForList= function(entity,startindex,rowcount){ 
    // ...
    mc.loading = true;
     $.ajax({
       // ... 
       success:function(json){
            mc.hasmorerows=json.list_info.has_more_rows
            mc.onDataLoading(json)  ;  
            mc.loading = false;
        },
        error: ()=> mc.loading = false
      });
    }

Так что наша mc.loading сообщит нам, если ajax уже завершен (не забудьте сбросить его значение при ошибке ajax)