Question

我正在纠正200个对象数组的延迟加载工作，并且提供了API以从服务器提取JSON（通过将索引，行数作为get AJAX的参数，响应时，我得到数据和是否有更多行的布尔值）。但是问题在于，最初我可以从200中获得10的数据，但是当我在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

Scroll是一个非常频繁的事件，因此我认为在实际调用onDataLoading之前，您已经有多个具有相同数据的Ajax调用，并且范围增加了。所以我应该添加互斥锁。

  // ... 
  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错误时重置其值）

滚动条到达底部后如何执行Ajax调用

1 个答案: