我将尝试解释我的实际设置，它背后的想法，什么中断，我在它周围尝试了什么。
上下文
我有一个 PHP5.3 后端将“事件”（一个事件是一个包含一些数据的标准数组，其中一个唯一的序列号）提供给 Javascript（使用 jQuery 1.7.x）。使用 jsonp（在子域上）和服务器端的长轮询来检索事件。第一个事件的 id 为 1，然后随着每个新事件递增。客户端跟踪“最后检索到的事件 id”，该值从 0 开始。对于每个长轮询请求，它都会提供该 id，因此后端仅返回该事件之后发生的事件。
事件以下列方式处理：一旦被接收（通过 jsonp 回调），它们被存储在一个 eventQueue 变量中，并且“最后检索到的事件 id”被更新为最后一个接收并存储在队列中的事件。然后调用一个处理下一个排队事件的函数。该函数检查一个事件是否已经被处理（通过在一个事件开始被处理时设置的另一个变量的方式），如果它什么都不做，那么调用堆栈将我们带回到 jsonp 回调，其中一个新的发出长轮询请求。（这将在处理其他事件时重复排队新事件的过程）但是，如果当前没有正在处理的事件，它会验证队列中是否还有事件，如果是这样，它会处理第一个（具有最低 id 的那个）。“处理事件”可以是与我的应用程序相关的各种任务，但与我遇到的问题或上下文无关。例如，更新一个变量、页面上的一条消息等。一旦一个事件被认为“正在处理完成”（一些事件会进行 ajax 调用以获取或发送数据，在这种情况下，这会发生在它们的成功 ajax 回调中），调用另一个名为 eventComplete 的函数。该函数从事件队列中删除已处理的事件，确保处理事件是否正在处理的变量设置为 false，然后调用处理事件队列的函数。（所以它处理下一个，最低的 id，事件）但不是我遇到的问题或上下文。例如，更新一个变量、页面上的一条消息等。一旦一个事件被认为“正在处理完成”（一些事件会进行 ajax 调用以获取或发送数据，在这种情况下，这会发生在它们的成功 ajax 回调中），调用另一个名为 eventComplete 的函数。该函数从事件队列中删除已处理的事件，确保处理事件是否正在处理的变量设置为 false，然后调用处理事件队列的函数。（所以它处理下一个，最低的 id，事件）但不是我遇到的问题或上下文。例如，更新一个变量、页面上的一条消息等。一旦一个事件被认为“正在处理完成”（一些事件会进行 ajax 调用以获取或发送数据，在这种情况下，这会发生在它们的成功 ajax 回调中），调用另一个名为 eventComplete 的函数。该函数从事件队列中删除已处理的事件，确保处理事件是否正在处理的变量设置为 false，然后调用处理事件队列的函数。（所以它处理下一个，最低的 id，事件）调用另一个名为 eventComplete 的函数。该函数从事件队列中删除已处理的事件，确保处理事件是否正在处理的变量设置为 false，然后调用处理事件队列的函数。（所以它处理下一个，最低的 id，事件）调用另一个名为 eventComplete 的函数。该函数从事件队列中删除已处理的事件，确保处理事件是否正在处理的变量设置为 false，然后调用处理事件队列的函数。（所以它处理下一个，最低的 id，事件）
问题
这在所有经过测试的主要浏览器上都非常有效。（在 Internet Explorer 8 和 9、Chrome、Opera、Firefox 上测试）由于使用了长轮询，它也非常灵活。即使在重新加载页面后，获取所有“历史记录”（大多数事件生成的文本数据会附加在页面中的某种控制台中）并处于应用程序的完全相同状态也非常好。但是，当事件数量变多时，这也会成为问题。根据估计，我需要能够处理多达 30,000 个事件。在我的测试中，即使有 7,000 个事件，事情也开始出错。Internet Explorer 8 堆栈溢出大约 400 个事件。Chrome 不会加载所有事件，但会关闭（和中断，但并不总是在同一点，与 IE8 不同）。IE9 和 FF 处理一切都很好，并在处理所有事件时挂起 2-3 秒，这是可以容忍的。但是，我在想，在它们破裂之前，这可能只是更多事件的问题。是我对当前的网络浏览器要求太高，还是我做错了什么？有办法解决吗？我的整个模型错了吗？
可能的解决方案
我摆弄了一些想法，但没有一个真正奏效。我尝试强制后端一次不输出超过 200 个事件，并在所有当前队列完成处理后添加新的轮询请求。仍然有堆栈溢出。我还尝试在完成处理后删除eventQueue对象（即使它当时是空的）并重新创建它，希望它可能会释放一些底层内存或其他东西。我缺乏想法，所以任何想法、指针或一般建议将不胜感激。
编辑：
我有一个启示！我想我确切地知道为什么会发生这一切（但我仍然不确定如何处理和修复它），我也会提供一些基本的代码摘录。
var eventQueue = new Object();
var processingEvent = false;
var lastRetrievedEventId = 0;
var currentEventId = 0;
function sendPoll() {
// Standard jsonp request (to a intentionally slow backend, i.e. long-polling),
// callback set to pollCallback(). Provide currentEventId to the server to only get
// the events starting from that point.
}
function pollCallback( data ) {
// Make sure the data isn't empty, this happens if the jsonp request
// expires (30s in my case) and it didn't get any new data.
if( !jQuery.isEmptyObject( data ) )
{
// Add each new event to the event queue.
$.each(data.events, function() {
eventQueue[ this.id ] = this;
lastRetrievedEventId = this.id; // Since we just put the event in the queue, we know it is officially the last one "retrieved".
});
// Process the next event, we know there has to be at least one in queue!
processNextEvent();
}
// Go look for new events!
sendPoll();
}
function processNextEvent() {
// Do not process events if they are currently being processed, that would happen
// when an event contains an asynchronous function, like an AJAX call.
if( !processingEvent )
{
var nextEventId = currentEventId + 1;
// Before accessing it directly, make sure the "next event" is in the queue.
if( Object.prototype.hasOwnProperty.call(eventQueue, nextEventId) )
{
processingEvent = true;
processEvent( eventQueue[ nextEventId ] );
}
}
}
function processEvent( event ) {
// Do different actions based on the event type.
switch( event.eventType ) {
case SOME_TYPE:
// Do stuff pertaining to SOME_TYPE.
eventComplete( event );
break;
case SOME_OTHER_TYPE:
// Do stuff pertaining to SOME_OTHER_TYPE.
eventComplete( event );
break;
// Etc. Many more cases here. If there is an AJAX call,
// the eventComplete( event ) is placed in the success: callback
// of that AJAX call, I do not want events to be processed in the wrong order.
}
}
function eventComplete( event ) {
// The event has completed, time to process the event after it.
currentEventId = event.id; // Since it was fully processed, it is now the most current event.
delete eventQueue[ event.id ]; // It was fully processed, we don't need it anymore.
processingEvent = false;
processNextEvent(); // Process the next event in queue. Most likely the source of all my woes.
}
function myApplicationIsReady() {
// The DOM is fully loaded, my application has initiated all its data and variables,
// start the long polling.
sendPoll();
}
$(function() {
// Initializing my application.
myApplicationIsReady();
});
看完之后，我明白了为什么调用堆栈会充满许多事件。例如（-> 表示调用）：
myApplicationIsReady() -> sendPoll()
然后在获取数据时：
pollCallback() -> [ processNextEvent() -> processEvent() -> eventComplete() -> processNextEvent() ]
括号中的部分是循环并导致调用堆栈溢出的部分。少量事件不会发生这种情况，因为它会这样做：
pollCallback() -> processNextEvent() -> processEvent() -> eventComplete() -> sendPoll()
那将有两个事件，第一个包含异步调用。（所以它到达第二个事件，它没有得到处理，因为第一个事件没有完成处理，而是调用轮询函数，然后释放整个调用堆栈，最终回调将恢复活动）
现在它不容易修复，它最初是这样设计的，因为：
- 我不想丢失事件（如，我想确保所有事件都得到处理）。
- 我不想挂起浏览器（我不能使用同步 AJAX 调用或等待某事完成的空循环）。
- 我绝对希望以正确的顺序处理事件。
- 我不希望事件卡在队列中并且应用程序不再处理它们。
这就是我现在需要帮助的地方！为了做我想做的事，听起来我需要使用链接，但这正是导致我的调用堆栈问题的原因。也许有更好的链接结构可以让我完成所有这些工作，而无需深入调用堆栈，我可能会忽略它。再次提前感谢您，我觉得我正在取得进步！