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

以简单的方式，您可以分块完成。

 <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);
 }

如果要保持 UI 响应，并希望能够在渲染大量 DOM 元素之间执行代码，则必须使用超时机制。为此，可以将 render 方法传递给 setTimeout 。

setTimeout不是将方法添加到堆栈并立即执行，而是将方法推送到任务队列，并且仅在当前 js 堆栈清除后执行它。

我提出的方法的主要步骤：

1. 将数据集复制到临时数组
2. 使用 splice 从数组中删除前 n 项
3. 将前 n 项呈现到 DOM
4. 如果仍有剩余项目，请转到 （2）

这是代码的主要部分，带有注释，假设：

• testData保存一系列数据点
• createRow保存将数据点转换为呈现的 DOM 元素的逻辑
• INITIAL_CHUNK_SIZE保存要在不超时的情况下呈现的行数。
• DEFAULT_CHUNK_SIZE保存每个后续循环必须呈现的行数

超时渲染器 （ toRenderer ）：

var toRenderer = function(s) {
  // We need a copy because `splice` mutates an array
  var dataBuffer = [].concat(testData);
  var nextRender = function(s) {
    // Default value that can be overridden
    var chunkSize = s || DEFAULT_CHUNK_SIZE; 
    dataBuffer
      .splice(0, chunkSize)
      .forEach(createRow);
    if (dataBuffer.length) {
      setTimeout(nextRender);
    }
  };
  // Triggers the initial (not timed out) render
  nextRender(INITIAL_CHUNK_SIZE);
};

在下面的示例中，我包含一个移动微调器，以显示渲染循环如何能够保持适当的帧速率。

请注意，DEFAULT_CHUNK_SIZE越大，渲染所有项目的速度就越快。权衡：一旦一个渲染块需要超过 1/60 秒，您将失去平滑的帧速率。

// SETTINGS
var DATA_LENGTH = 10000;
var DEFAULT_CHUNK_SIZE = 100;
var INITIAL_CHUNK_SIZE = 10;
var list = document.querySelector("ul");
var createRow = function(data) {
  var div = document.createElement("div");
  div.innerHTML = data;
  list.appendChild(div);
};
// Blocking until all rows are rendered
var bruteRenderer = function() {
  console.time("Brute renderer total time:");
  testData.forEach(createRow);
  console.timeEnd("Brute renderer total time:");
}
// Pushes "render assignments" to the "task que"
var toRenderer = function(s) {
  console.time("Timeout renderer total time:");
  var dataBuffer = [].concat(testData);
  var nextRender = function(s) {
    var chunkSize = s || DEFAULT_CHUNK_SIZE;
    dataBuffer
      .splice(0, chunkSize)
      .forEach(createRow);
    if (dataBuffer.length) {
      setTimeout(nextRender);
    } else {
      console.timeEnd("Timeout renderer total time:");
    }
  };
  nextRender(INITIAL_CHUNK_SIZE);
};
// EXAMPLE DATA, EVENT LISTENERS:
// Generate test data
var testData = (function() {
  var result = [];
  for (var i = 0; i < DATA_LENGTH; i += 1) {
    result.push("Item " + i);
  }
  return result;
}());
var clearList = function() {
  list.innerHTML = "";
};
// Attach buttons
document.querySelector(".js-brute").addEventListener("click", bruteRenderer);
document.querySelector(".js-to").addEventListener("click", toRenderer);
document.querySelector(".js-clear").addEventListener("click", clearList);

button {
  display: inline-block;
  margin-right: .5rem;
}
.spinner {
  background: red;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-name: move;
  animation-iteration-count: infinite;
}
@keyframes move {
  from {
    transform: translate3d(800%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
ul {
  height: 200px;
  overflow-y: scroll;
  background: #efefef;
  border: 1px solid #ccc;
}

<button class="js-brute">
  Inject rows brute force
</button>
<button class="js-to">
  Inject rows timeout
</button>
<button class="js-clear">
  clear list
</button>
<pre></pre>
<div class="spinner"></div>
<ul>
</ul>

从服务器获取的数据量有问题，你应该找到一种方法来限制数组。

因此，客户端代码可以只处理适当数量的元素，而只是可以向用户显示的元素。

如果这是不可能的，并且您希望在客户端完成所有操作，则应采用更复杂的方法。

您必须保存指向已处理元素的指针，以及一个包含要处理的元素数量的变量（页码？

然后使用for循环。

// Globally but not global
var cursor = 0
... 

for(var i = cursor; i < (cursor+pageNum); i++) {
    var element = myDataAsJsonFromApi[i];
    // ... do something here.
}
// check if pageNum elements is added..
cursor += pageNum
if (myDataAsJsonFromApi.length == cursor) {
 // load from server...
}

一种选择是将数据缓冲区拆分为块，以便一次可以对某些数据进行操作。

var data = [1,2,3,4,5,6,7,7,8,9,9,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,89];
(function () {
  var lastSliceStart = 0;
  function writeNext() {
    var length = 10;
    var chunk = $(data).slice(lastSliceStart, lastSliceStart+length);
    $(chunk).each((key, item) => {
      console.log(item);
    });
    lastSliceStart += length;
    if (lastSliceStart < data.length) {
      setTimeout(writeNext, 500); // Wait .5 seconds between runs
    }
  }
  writeNext();
})();

https://jsfiddle.net/bogfdmfb/1/

构建队列，一次处理几个项目的队列，显示进度，处理队列中的下一个项目等等。

//your app
App = {
    data: [] //set your JSON dataSource here
}
//define Task
Task = function () {        
    this.buildQueue(10);
};
Task.prototype = {
    buildQueue: function (size) {
        var data_count = App.data.length; //length of your datasource
        this.queue = [];                        
        // fill the queue
        var lastIndex = 0;
        var current_index = size;
        var c = true;
        while (c) {
            if (current_index >= data_count - 1) {
                current_index = data_count;
                c = false;
            }
            this.queue.push([lastIndex, current_index - 1]);
            lastIndex = current_index;
            current_index += size;
        }
        /* If size is 10, array would be [[0,9], [10,19], [20,29]....and so on], The smaller the size, better progress / percentage variation  / loading on ui display */
    },
    doNext: function () {
        if (this.queue.length == 0) {
            this.end();
            return;
        }            
        var row = this.queue.shift(); //stack is LIFO, queue is FIFO, this.queue.pop()
        try {
            this.processQueue(App.data, row[0], row[1]); //pass dataSource, and indexes of array, loop in processQueue function for indexes passed
        } catch (e) {                
            return;
        }
        this.incrementProgress(row[1] / App.data.length); //progress on ui
        // do next
        var _self = this;
        setTimeout(function () {
            _self.doNext();
        }, 1);
    },
    incrementProgress: function (percent) {
        var $progress = $('#percent');
        percent = Math.ceil(percent * 100);
        percent = percent + '%';
        $progress.text(percent);
    },
    start: function () {            
        $('#percent').show();
        this.doNext(); //initiate loop
    },
    end: function () {            
        $('#percent').hide();            
    },
    processQueue: function (data, start, end) {            
        for (var i = start; i <= end; i++) {                
            var dataObj = data[i];
            //use the data here, update UI so user sees something on screen
        }
    }
};
//initialize an instance of Task
var _task = new Task(task); 
_task.start();