javascript - 如何在滚动时以 html 表单填充字段

Question

我有一个包含 300 个字段的表格。我想在单击按钮时显示数据。表单的数据存储为对象（键-值对）。目前在一次运行中填充完整的 300 个字段时面临一些延迟。有什么方法可以填充最初在表单中显示的字段，然后滚动到填充 else 的区域作为 UI 的显示？

score 0 · Accepted Answer

老实说，如果一个表单中有 300 个元素，那么可能是时候将该页面分解为子页面了。:)

您无需担心滚动位置。你想要做的不是在一个紧密的、渲染阻塞的、CPU 绑定的循环中填充你的表单。

您希望尽可能快地填充表单，并保持页面响应能力。

只需将您的代码放在 setTimeout() 中即可。假设你的表单正好有 300 个元素要填充（你可以弄清楚如何处理动态大小的情况）：

for (i = 0; i < 30; i++) {
  setTimeout(20, function(i) {
   for (var j = i*10; j < 10; j++) {
      populateFormElement(j);
   }
  });
}

这将导致浏览器填充 10 个表单元素，然后让页面保持响应状态。适当调整超时值。

编辑：是的，你也可以用 element.scrollTop、window.innerHeight 和一个滚动事件来做滚动的事情。但是，如果用户进一步向下跳转页面，仍然会有延迟。此外，它很复杂，并且有边缘情况。我认为上面的答案就是你想要的——消除“延迟”。

1 回答 1