阿贾克斯聊天页面冻结浏览器窗口

Question

我有网站。我用jQuery AJAX编写聊天页面。有3个Ajax调用。用于发送新的聊天文本

1. AJAX请求，检测用户键入
2. AJAX请求检测新邮件
3. AJAX请求。

我使用JSON发送和接收聊天的低数据。我使用最好的技术与AJAX聊天，但当我在输入框中输入消息或在聊天历史记录中上下滚动时，网页会冻结。我无法理解页面为何冻结。

首先我抓取所有聊天记录。我改变了它，所以它只会提取新的消息，如果有的话，但这并没有解决我的问题。

其次，我尝试设置async=true或false - 这不能解决我的问题。它必须正常工作而不会冻结，但会冻结。

屏幕截图如下。

Answer 1

你排队你的AJAX请求？

如果您使用的是jQuery，请使用.queue()，或者直接将AJAX函数顺序放入函数中，您可以使用$.Deferred。或者，您可能需要在功能上设置/调整setTimeout。

很好的开发者（谁不是我）developed an ajaxQueue plugin能很好地处理这些事件。一个工作jsfiddle的例子是here。

Answer 2

根据您的要求，我可以想象在执行过程中有两个可能的问题。

1. 您有一个用户是打字的功能，这意味着你必须一个关键事件已经绑定（无论是插入钥匙，键下，键按下）如果您没有抖事件处理程序，将有是每个输入字符的请求，并可能会冻结浏览器。有一些易于使用的插件用于jQuery的debounce功能。这里是一个例子http://benalman.com/projects/jquery-throttle-debounce-plugin/
2. DOM操作在所有浏览器中都非常耗时。与Angular和React不同，jQuery没有为你优化它。您必须尽量减少添加/更新/删除DOM元素。假设你获取消息，在DOM树中做任何事之前，检查它们是否存在任何改变/它们是否存在。

的$.ajax()的async选项是一个基于document默认为真。你不需要自己添加它。