滚动函数不会从外部 json 加载接下来的 50 个项目

Question

这个想法是一次只加载50个项目来帮助加载页面。
我有代码可以将前 50 个项目从 json 文件加载。

然后，当用户向下滚动页面一半并继续告诉没有更多要加载的项目时，我想加载下一个 50 个。
这就是我目前所拥有的。

//This loads the first 50 items from external Json file. No issue here
$(window).load(function(){
  var picarioAPI = "https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=0&take=50";
  var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
  $.getJSON(picarioAPI, function (json) {
    var text = "";
    for (i in json.values)
    for (var j in json.values[i].labels) {
      if (json.values[i].labels[j].name == "Show") {
      // This is for a popup function.
      var b = 'data-options={"src": "#hidden-content-3'+json.values[i].id+'", "touch": false}';
      text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3'+json.values[i].id+'"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="'+json.values[i].height+'"data-width="'+json.values[i].width+'"data-url="'+json.values[i].displayUrl+'"data-full="'+json.values[i].renderUrl +'"data-name="'+json.values[i].name+'"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
      document.getElementById("design1").innerHTML = text;
      }
    };
  });
});

然后，我加载一个滚动函数来加载接下来的 50 个项目，依此类推。 我使用该数字将 50 个项目添加到 Json 文件 API 的末尾

//This is the part I'm not getting correct.
var number = 0;
$(window).scroll(function () {
  if ($(window).scrollTop() > $('body').height() / 2) {
    number++;
    // I use the number to dynamically load the next 50 items as the user scrolls.
    var total = number + 50;
    var picarioAPI = 'https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip='+total+'&take=50';
    var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
    $.getJSON(picarioAPI, function (json) {
      var text = "";
      for (i in json.values)
      for (var j in json.values[i].labels) {
        if (json.values[i].labels[j].name == "Show") {
        //this is for a popup function
        var b = 'data-options={"src": "#hidden-content-3'+json.values[i].id+'", "touch": false}';
        text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3'+json.values[i].id+'"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="'+json.values[i].height+'"data-width="'+json.values[i].width+'"data-url="'+json.values[i].displayUrl+'"data-full="'+json.values[i].renderUrl +'"data-name="'+json.values[i].name+'"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
        document.getElementById("design1").innerHTML += document.getElementById("design1").innerHTML + text;
        }
      };
    });
  };
});

问题是当我向下滚动页面一半时，它将开始加载所有 2000 个项目，而不仅仅是接下来的 50 个项目。
任何帮助都会很棒。

Answer 1

除非你在到达一半时停止滚动，否则你会得到多个scroll触发器 - 你需要引入一些标志来指示请求正在进行中，并忽略滚动事件，直到加载新数据

var inflight = false;
var number = 0;
$(window).scroll(function() {
    if (!inflight && $(window).scrollTop() > $('body').height() / 2) {
        inflight = true;
        number++;
        // I use the number to dynamically load the next 50 items as the user scrolls.
        var total = number + 50;
        var picarioAPI = 'https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=' + total + '&take=50';
        var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
        $.getJSON(picarioAPI, function(json) {
            var text = "";
            for (i in json.values) {
                for (var j in json.values[i].labels) {
                    if (json.values[i].labels[j].name == "Show") {
                        //this is for a popup function
                        var b = 'data-options={"src": "#hidden-content-3' + json.values[i].id + '", "touch": false}';
                        text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3' + json.values[i].id + '"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="' + json.values[i].height + '"data-width="' + json.values[i].width + '"data-url="' + json.values[i].displayUrl + '"data-full="' + json.values[i].renderUrl + '"data-name="' + json.values[i].name + '"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
                        document.getElementById("design1").innerHTML += document.getElementById("design1").innerHTML + text;
                    }
                }
            }
            inflight = false;
        });
    }
});