无限滚动 Ajax JSON 尝试一次获取 10 个随机项目

如何解决无限滚动 Ajax JSON 尝试一次获取 10 个随机项目

我能够让无限滚动正常工作，但我不知道如何在我的代码笔中显示 10 个随机项目：https://codepen.io/smuglovsky/pen/VwpjgQZ

// infinite scroll
var currentscrollHeight = 0;
var count = 0;

jQuery(document).ready(function ($) {
  for (var i = 0; i < 10; i++) {
    callData(count); //Call 10 times on page load
    count++;
  }
});

$(window).on("scroll",function () {
  const scrollHeight = $(document).height();
  const scrollPos = Math.floor($(window).height() + $(window).scrollTop());
  const isBottom = scrollHeight - 100 < scrollPos;

  if (isBottom && currentscrollHeight < scrollHeight) {
    //alert('calling...');
    for (var i = 0; i < 10; i++) {
      callData(count); //Once at bottom of page -> call 10 times
      count++;
    }
    currentscrollHeight = scrollHeight;
  }
});

function callData(counter) {
  $.ajax({
    type: "GET",url: "https://shop.biblefarm.org/democontenArray.json",dataType: "json",success: function (result) {

这样我就能得到结果，但只有第一条记录总是相同的重复

      /*
      $(
        '<div class="card my-4 py-3"><h4 class="card-title">' +
          result[0] +
          "</h4><p>" +
          counter +
          "</p></div>"
      ).appendTo(".list");
      */

尝试在此处选择随机结果，但未定义

      // Pick random results from the array
      var randomresults = Math.floor(Math.random() * result.length);

      $(
        '<div class="card my-4 py-3"><h4 class="card-title">' +
          randomresults[0] +
          "</h4><p>" +
          counter +
          "</p></div>"
      ).appendTo(".list");
    },error: function (result) {
      //alert("error");
      $(
        '<div class="card my-4 py-3"><h4 class="card-title">API call Failed</h4><p>' +
          counter +
          "</p></div>"
      ).appendTo(".list");
    }
  });
}