在不破坏页面的情况下有效地重复更新DOM数据

Question

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

我正在为表现而做的事情：

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

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

谢谢你们！

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

修改 这是我的setTimeout和clearTimeout的一小段： if (clickTimeout) { clearTimeout(clickTimeout); } clickTimeout = setTimeout(function() { clickLink(menuItem.attr('href')); }, 500);

Answer 1

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

我认为这个问题的标题是错误的，而且应该更有效地重复使用数据更新DOM而不会破坏页面。