Jquery一次循环和绑定10条记录

Question

我有一个场景,我从服务器获得数千条记录作为JSON并将所有记录绑定到页面.对于每条记录,我在jquery中进行一些计算并将数据绑定到UI.由于记录计数为1000,因此计算和绑定数据的时间更长.完成所有记录计算后,页面上的数据将被绑定.是否有任何选项可以逐个或10乘10绑定数据,并在UI上显示该集合的绑定.我想要找到的是一次为10条记录执行$ .each并将下一组10条记录附加到它上面,依此类推.任何想让页面加载更快的想法？(我的要求不需要分页).任何线索都可以提供帮助.

<div id="keepFinalDataHere"></div>


$.each(data, function (i, record) {

 content += "<div>" + record.id + "</div><div>" + record.fromId + "</div><div>" + record.subject + "</div>";
        });

    $(content).appendTo('#keepFinalDataHere');

在上面的代码中,内容是通过获取数千个记录来构建的,一旦构建了内容,它就被绑定到div.我正在寻找一个选项来获取前10个项目绑定数据,以确保用户感觉页面已加载,然后APPEND剩余项目100个左右的现有列表.

Answer 1

你可以用简单的方式做大块的事情.

 <div id="keepFinalDataHere"></div>

<script>
//.../ 

var chunkSize = 50;//what ever you want or could be dynamic based on data size
var $keepFinalDataHere = $('#keepFinalDataHere');
$.each(data, function (i, record) {
  content += "<div>" + record.id + "</div><div>" + record.fromId + "</div><div>" + record.subject + "</div>";
     if(i % chunkSize === 0){ // content chunk is ready
          $keepFinalDataHere.append(content); // show records
          content = '';//reset the content
         }
    });
if(!(content === '')){//any leftOver records
   $keepFinalDataHere.append(content);
 }