上下文

我有一个PHP5.3后端馈送＆＃34;事件＆＃34; （一个事件是包含一些数据的标准数组，其中包含一个唯一的序列号）到Javascript（使用jQuery 1.7.x）。使用jsonp（在子域上）和服务器端的长轮询检索事件。第一个事件的id为1，然后随每个新事件递增。客户端跟踪＆＃34;最后检索到的事件id＆＃34;，该值从0开始。对于每个长轮询请求，它提供该id，因此后端仅返回在该后端之后发生的事件。

事件按以下方式处理：收到后（通过jsonp回调），它们存储在eventQueue变量中，＆＃34;最后检索到的事件id＆＃34;更新为收到并存储在队列中的最后一个事件之一。然后调用一个处理下一个排队事件的函数。该函数检查事件是否已经被处理（通过每当事件开始被处理时设置的另一个变量的方式），如果它什么也没做，所以callstack将我们带回到jsonp回调中发出长轮询请求。（这将重复在处理其他事件时排队新事件的过程）但是，如果当前没有事件正在处理，它将验证队列中是否还有事件，如果是，则处理第一个事件（具有最低的身份）。＆＃34;处理事件＆＃34;可以是与我的应用程序相关的各种任务，但不是我遇到的问题或上下文。例如，更新变量，页面上的消息等。一旦事件被视为＆＃34;完成正在处理＆＃34; （某些事件进行ajax调用以获取或发送数据，在这种情况下，这发生在成功的ajax回调中），调用另一个名为eventComplete的函数。该函数从事件队列中删除已处理的事件，确保处理事件是否正在处理的变量设置为false，然后调用处理事件队列的函数。（因此它处理下一个，最低的id，事件）

问题

这在所有经过测试的主流浏览器上都非常有效。（在Internet Explorer 8和9，Chrome，Opera，Firefox上测试）由于使用了长轮询，它也非常敏捷。获得所有＆＃34;历史记录＆＃34;它也非常好。（即使在重新加载页面之后，大多数事件生成的文本数据都会附加到页面中的某种控制台中）已发生的事情并且处于完全相同的应用程序状态。然而，当事件数量变高时，这也成为问题。根据估计，我需要能够处理多达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();
});

在看完事物后，我理解为什么callstack充满了许多事件。例如（ - >表示调用）：

myApplicationIsReady() -> sendPoll()

然后在获取数据时：

pollCallback() -> [ processNextEvent() -> processEvent() -> eventComplete() -> processNextEvent() ]

括号中的部分是循环并导致callstack溢出的部分。事件发生的次数不会发生，因为它会这样做：

pollCallback() -> processNextEvent() -> processEvent() -> eventComplete() -> sendPoll()

那将是两个事件，第一个包含异步调用。（所以它进入第二个事件，它没有被处理，因为第一个事件没有完成处理，而是调用轮询函数，然后释放整个callstack并最终恢复它的回调活动）

现在要修复它并不容易，因为它首先是这样设计的，因为：

我不想丢失事件（如同，我想确保处理所有事件）。
我不想挂起浏览器（我不能使用同步AJAX调用或等待完成某事的空循环）。
我绝对希望按正确的顺序处理事件。
我不希望事件卡在队列中，应用程序不再处理它们。

这就是我现在需要帮助的地方！要做我想要的事情听起来我需要使用链接，但这正是导致我的callstack问题的原因。也许有一个更好的链接结构可以让我做到这一切，而不会在callstack中无限深入，我可能会忽略它。提前再次感谢您，我觉得我在取得进步！

Answer 1

如何使用setTimeout(func, 0)？

而不是递归调用函数

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

上下文

问题

可能的解决方案

1 个答案: