在不中断页面的情况下，使用数据有效地重复更新DOM

Effectively and repeatedly updating DOM with data without breaking page

本文关键字：有效地 数据 DOM 更新 中断 情况下      更新时间：2023-09-26

我正在创建一个SPA，它当然使用AJAX动态加载div中的页面。我的布局是一个侧手风琴菜单，当你点击一个项目时，它会加载旁边div上的信息。我的问题是，如果一个人决定以每秒最快的速度点击菜单项，我的页面中就会出现空白内容。所以我的问题是，当人们点击速度如此之快时，有哪些最佳实践（如果有的话）可以避免页面破裂？

我为性能所做的事情：

  • 在应用程序启动之前使用html模板和json文件构建页面，将（简单的）页面保存在内存中以获取，而不是每次单击都调用ajax
  • 目前，我在clearTimeout和setTimeout上使用的每次单击都设置为几毫秒，以减慢切换页面的过程——这并不理想

不幸的是，我不能发布代码，因为它太长了，但我希望我能得到一些关于这些信息的帮助。

谢谢大家！

**注意：这只是前端工作，没有数据库，因为负载不重。

编辑：以下是我的setTimeout和clearTimeout的一个小片段： if (clickTimeout) { clearTimeout(clickTimeout); } clickTimeout = setTimeout(function() { clickLink(menuItem.attr('href')); }, 500);

我通常只是在发送ajax之前禁用导致事件的UI元素，然后在数据到达后客户端代码重新启用它。当然，只有当您有在数据到达时运行的代码时，才能做到这一点。如果数据就是这样显示的，那么在用数据更新DOM时也可能会出错。有时空的DIV只会在一段时间后出现。

我认为这个问题的标题是错误的，应该更像是在不破坏页面的情况下用数据有效地重复更新DOM。

相关文章：