Javascript 如何在DOM中实现无限卷轴

所以我有一个JSON对象，我正在阅读它，它看起来像

{data:[对象，对象….]}

目前我正在使用

getJSON

方法来提取该数据。 假设这个数组中有大约1600组对象

当前，当我加载页面时，它需要几秒钟的时间来解析所有这些对象。我将如何处理呈现前一百个对象和下一百个对象的逻辑，以此类推。没有任何滞后

如有任何反馈，将不胜感激

  $.getJSON('products.json', function (pdata) {
          for(var i =0; i < pdata.data.length; i++) {
              getInformation(pdata.data[i]);
          }

  function getInformation(obj){
          console.log(obj);

          var $ul = $('<ul>').addClass('view').appendTo('body');

          for (var i = 0; i < 4; i++) {
              var $list = $('<li>').appendTo($ul);
              var $image = $('<img>').appendTo($list);
              var $content = $('<div>').appendTo($list);
              var $productName = $('<div>').appendTo($content);
              var $price = $('<div>').appendTo($content);

              $image.attr({src: obj.imageUrl,
               width: '200px',
               height: '200px'
              });

              $content.addClass('content');
              $productName.addClass('productName');
              $price.addClass('price');

              $productName.html(obj.fullName);
              $price.html('Price: '+ obj.price);
          }

  }

$.getJSON（'products.json'，函数（pdata）{
对于（var i=0；i”）.addClass（'view'）.appendTo（'body'）；
对于（变量i=0；i<4；i++）{
var$list=$（“
”）.appendTo（$ul）；
var$image=$（'老实说，我会使用一个框架来为您实现这一点，比如datatables或angular

但是，如果您实现了某种逻辑，并且您认为您的独特解决方案是最佳解决方案，那么您所要做的就是在全局对象中维护数据列表并对其进行分页，仅当用户滚动到页面底部时才添加“下一个10”

大致如下：

var data = [];
var page = 0;
function loadNext(int number){
    page++;
    RenderNext(data.splice(page-1 * size, page * size);
}

其中RenderNext（）是以前存在的代码，用于解析参数中的所有记录。
在底部执行插入数据的代码之前，滚动到100px

window.bInsertingJSON = false;
window.onscroll = function(){
    if(window.pageYOffset >= (document.body.scrollHeight-document.body.clientHeight - 100) && !window.bInsertingJSON) {
        // add block flag
        window.bInsertingJSON = true;
        // here's your code
        // don't forget to reset flag on the end of JSON parsing/inserting
    }
}

您的getInformation函数对于DOM来说是非常繁重的…要添加和更改很多，很容易使用

function getInformation(obj){
    console.log(obj);
    var sHTML = "";
    for (var i = 0; i < 4; i++) {
        sHTMl += "<li>";
        sHTMl += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
        sHTMl += "<div class='content'><div>";
        sHTMl += "<div class='productName'>" + obj.fullName + "<div>";
        sHTMl += "<div class='price'>Price: " + obj.price + "</div>";
        sHTMl += "</li>";
    }
    $("<ul class='view'>"+sHTML+"</ul>").appendTo(body);
    // and I'll give a second for implement it
    setTimeout(function(){window.bInsertingJSON = false;},1000);
}

对于向上滚动时的块插入，让我们定义变量

window.nPrevScroll = 0;

在窗户上准备好了吗

$（函数（）{

接下来，让我们定义scroll的事件句柄

$(window).on("scroll", function(){

在这里，我们需要写入插入条件，如果向下滚动（100是底部100px的常数）

并比较滚动位置和窗口高度

&& $(window).scrollTop() + $("body").outerHeight() + 100 >= $(document).outerHeight()

和标志，用于在插入DOM元素之前停止事件处理

&& !window.bInsertingJSON) {

设置停止处理的标志

window.bInsertingJSON = true;

并根据请求给您打电话

$.getJSON('products.json', function (pdata) {
    for(var i =0; i < pdata.data.length; i++) {
        getInformation(pdata.data[i]);
    }
});

事件结束处理程序

});

现在，定义处理函数

function getInformation(obj){
    console.log(obj);
    var sHTML = "";
    for (var i = 0; i < 4; i++) {
        sHTMl += "<li>";
        sHTMl += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
        sHTMl += "<div class='content'><div>";
        sHTMl += "<div class='productName'>" + obj.fullName + "<div>";
        sHTMl += "<div class='price'>Price: " + obj.price + "</div>";
        sHTMl += "</li>";
    }
    $("<ul class='view'>"+sHTML+"</ul>").appendTo(body);

正如我在本例中看到的，您将阻止不必要的JSON解析调用

现在，这是没有注释的完整代码

window.bInsertingJSON = false;
    window.nPrevScroll = 0;
$(function(){    
    $(window).on("scroll", function(){
        if($(window).scrollTop() > window.prevScroll
            && $(window).scrollTop() + $("body").outerHeight() + 100 >= $(document).outerHeight()
            && !window.bInsertingJSON) {
            window.bInsertingJSON = true;
            $.getJSON('products.json', function (pdata) {
                for(var i =0; i < pdata.data.length; i++) {
                    getInformation(pdata.data[i]);
                }
            });
        }
        window.nPrevScroll = $(window).scrollTop();
    });

});

function getInformation(obj){
    console.log(obj);
    var sHTML = "";
    for (var i = 0; i < 4; i++) {
        sHTMl += "<li>";
        sHTMl += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
        sHTMl += "<div class='content'><div>";
        sHTMl += "<div class='productName'>" + obj.fullName + "<div>";
        sHTMl += "<div class='price'>Price: " + obj.price + "</div>";
        sHTMl += "</li>";
    }
    $("<ul class='view'>"+sHTML+"</ul>").appendTo(body);

    setTimeout(function(){window.bInsertingJSON = false;},1000);
}

window.bInsertingJSON=false；
window.nPrevScroll=0；
$（函数（）{
$（窗口）.on（“滚动”，函数（）{
if（$（window）.scrollTop（）>window.prevScroll
&&$（窗口）.scrollTop（）+$（“正文”）.outerHeight（）+100>=$（文档）.outerHeight（）
&&！window.bInsertingJSON）{
window.bInsertingJSON=true；
$.getJSON（'products.json'，函数（pdata）{
对于（var i=0；i”；
sHTMl+=“”；
sHTMl+=“”；
sHTMl+=“”+obj.fullName+“”；
sHTMl+=“价格：”+obj.Price+”；
sHTMl+=“
”；
}
$（“
”+sHTML+“
”）。附录（正文）；
setTimeout（函数（）{window.bInsertingJSON=false；}，1000）；
}

我有点困惑，在检查偏移量并将标志设置为true之后，我仍然有数据循环。您能否提供更多的解释，thnxs用于响应我想当您将标志重置为false时这很重要。我检查了两次代码，代码工作正常。对于测试，我添加了line console.log（'test'）；setTimeout（function（）{window.bInsertingJSON=false；}，3000）；它停止工作了3秒。你能给我看一下你从json添加DOM元素的代码吗？是的，我在问题中添加了代码，我访问了json，并添加到了DOMIt非常繁重的DOM代码中，因为你有很多DOM的插入和修改。在我的第一条评论中使用simpleanswer

});

function getInformation(obj){
    console.log(obj);
    var sHTML = "";
    for (var i = 0; i < 4; i++) {
        sHTMl += "<li>";
        sHTMl += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
        sHTMl += "<div class='content'><div>";
        sHTMl += "<div class='productName'>" + obj.fullName + "<div>";
        sHTMl += "<div class='price'>Price: " + obj.price + "</div>";
        sHTMl += "</li>";
    }
    $("<ul class='view'>"+sHTML+"</ul>").appendTo(body);

    setTimeout(function(){window.bInsertingJSON = false;},1000);
}

window.bInsertingJSON = false;
    window.nPrevScroll = 0;
$(function(){    
    $(window).on("scroll", function(){
        if($(window).scrollTop() > window.prevScroll
            && $(window).scrollTop() + $("body").outerHeight() + 100 >= $(document).outerHeight()
            && !window.bInsertingJSON) {
            window.bInsertingJSON = true;
            $.getJSON('products.json', function (pdata) {
                for(var i =0; i < pdata.data.length; i++) {
                    getInformation(pdata.data[i]);
                }
            });
        }
        window.nPrevScroll = $(window).scrollTop();
    });

});

function getInformation(obj){
    console.log(obj);
    var sHTML = "";
    for (var i = 0; i < 4; i++) {
        sHTMl += "<li>";
        sHTMl += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
        sHTMl += "<div class='content'><div>";
        sHTMl += "<div class='productName'>" + obj.fullName + "<div>";
        sHTMl += "<div class='price'>Price: " + obj.price + "</div>";
        sHTMl += "</li>";
    }
    $("<ul class='view'>"+sHTML+"</ul>").appendTo(body);

    setTimeout(function(){window.bInsertingJSON = false;},1000);
}