javascript - jQuery 浏览器在向 div 添加大量行时会卡住

Question

当我需要通过 jQuery 函数append() 添加大约 2000 个元素时，浏览器会卡住，并且似乎一切都卡住了一段时间。

这是因为 jQuery 本身的问题还是......我的编码方面有任何逻辑问题？ 我正在做的事情如下:

for (var i=0; data.length; i++) {
  add_elem(data[i]);
}

function add_elem(data) {
  $("#wrapper").append('<div class="row" id="elem_' + data['id'] + '>' + data['htmlv'] + '</div>');
  uniform_elem($('#elem_' + data['id']));
}

uniform_elem() 有一些 ui 处理，使事情看起来不错。

有什么好主意吗？

Answer 1

不要在循环中调用 add_elem，而是在循环数据变量时将元素的所有 html 存储在单个变量中，然后通过传入新变量来调用 add_elem。

var elements = "";

// Store all elements in the loop
for (var i=0; data.length; i++) {
  elements+= '<div class="row" id="elem_' + data['id'] + '>' + data['htmlv'] + '</div>';
}

// Invoke add_elem once and only once using the new elements var
add_elem(elements);

function add_elem(data) {
  // Append once to the DOM
  $("#wrapper").append(data);
  for (var j=0; data.length; j++) {
    uniform_elem($('#elem_' + data['id']));
  }
}