阿賈克斯聊天頁面凍結瀏覽器窗口

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默認爲真。你不需要自己添加它。