javascript - 事件系统导致Javascript中的堆栈溢出

Question

我将尝试解释我的实际设置，其背后的想法，出现的问题以及围绕它的尝试。

上下文

我有一个PHP5.3后端向Javascript(使用jQuery 1.7.x)提供“事件”(事件是一个包含一些数据的标准数组，其中包括唯一的序列号)。使用jsonp(在子域上)并在服务器端进行长轮询来检索事件。第一个事件的ID为1，然后随着每个新事件的增加而递增。客户端跟踪“上次检索到的事件ID”，该值从0开始。对于每个长轮询请求，它都提供该ID，因此后端仅返回在该事件之后发生的事件。

按照以下方式处理事件:接收到事件(通过jsonp回调)后，将它们存储在eventQueue变量中，并将“最后检索到的事件ID”更新为接收到并存储在队列中的最后一个事件。然后调用一个函数来处理下一个排队的事件。该函数检查事件是否已经被处理(通过在事件开始处理时设置的另一个变量的方式)，如果不执行任何操作，则调用堆栈将我们带回到jsonp回调，其中新发出长轮询请求。 (这将在处理其他事件时重复排队新事件的过程。)但是，如果当前没有正在处理的事件，它将验证队列中是否还有事件，如果是，它将处理第一个事件(具有最低ID)。 “处理事件”可以是与我的应用程序相关的各种任务，但与我所遇到的问题或上下文无关。例如，更新变量，页面上的消息等。将某个事件视为“正在处理”(某些事件会进行ajax调用以获取或发送数据，在这种情况下，此操作会在其成功的ajax回调中发生)，调用另一个名为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()
那将发生两个事件，第一个事件包含一个异步调用。 (因此到达第二个事件，由于第一个未完成处理，因此未得到处理，而是调用了轮询函数，该函数随后释放了整个调用堆栈，并最终从该回调中恢复了该 Activity )

现在，修复起来并不容易，它的设计初衷是这样的，因为:

我不想丢失事件(因为，我想确保所有事件都已处理)。

我不想挂起浏览器(我无法使用同步AJAX调用或空循环等待完成操作)。

我绝对希望事件以正确的顺序得到处理。

我不希望事件卡在队列中并且应用程序不再处理它们。

那是我现在需要帮助的地方!要执行我想做的事情，听起来好像需要使用链接，但这正是导致我的调用堆栈问题的原因。也许有一个更好的链接结构可以让我做到所有这些，而不必深入到调用栈中，而我可能忽略了它。再次感谢您，我感觉自己正在进步!

Answer 1

不使用递归调用函数，而是使用setTimeout(func, 0)怎么样？