Firefox 3.6.6 和 4.0 beta 1 中的 jQuery 自定义事件和过多递归错误

Question

我收到“太多递归”错误。我将尝试对发生此问题的实际应用程序进行清晰的模拟。

假设该应用程序正在尝试调用网络服务来获取有关超长 cargo 列车内容的信息。信息如此之多，我们不能简单地调用 Web 服务并告诉它一次性发送整列火车中每节车厢的所有信息。相反，我们依次向网络服务询问每辆货车的信息，当收到有关单个货车的信息时，我们更新页面，然后询问下一辆车。

为了保持客户端响应，我们避免循环并使用带有 array.shift() 的事件:

我们有一个事件:

$('body').bind('NextBoxCar', function( e,  p) { getNexBoxCar(e,p);  });

我们有一个函数可以从数组中删除第一个 boxcarid 并将其发送到网络服务:

 EDIT: BoxCarIds is not a global but inside a function
 function() foo {
     var BoxCarIds = [123, 222, 767, 1234, 9298, ...  999];
     $('body').triggerHandler('NextBoxCar', BoxCarIds);
 }

 function getNextBoxCar(e, BoxCarIds) {      

   var id =  BoxCarIds.shift();

   // build an ajax request; omitted for brevity
     $.ajax( {
    .
    . <snip>
    .
     success:  function(data, textStatus, oHTTP ) {
        UpdatePage(data, BoxCarIds);
     }
   });

 }

当 Boxcar 的数据从 Web 服务返回时，ajax 成功处理程序会调用以下函数，该函数会更新页面，然后触发 NextBoxCar 事件。我相信这就是递归问题发生的地方。

 function UpdatePage(data, BoxCarIds) {

     // update the page with data
      .
      . <snip>
      .

     // if there are still ids remaining in the array, we need to call the webservice again by firing the event

     if (BoxCarIds.length > 0 ) {
       $('body').triggerHandler('NextBoxCar', BoxCarIds);

     }


 }

如何避免递归问题？

谢谢

Answer 1

这里的递归部分对于功能来说并不重要。这只是 ajax 调用的结果。您可以使 ajax 调用同步并将 getNextBoxCar 更改为循环。但是，这仍然会使页面无响应!

因此，我认为您可以通过使用 setTimeout 调用 UpdatePage 方法来解决该问题。这应该会破坏递归并使页面保持响应。请参阅this jsFiddle example .

尝试更改为:

// build an ajax request; omitted for brevity
$.ajax( {
    .
    . <snip>
    .
    success:  function(data, textStatus, oHTTP ) {
        setTimeout( function() {
            UpdatePage(data, BoxCarIds);
        }, 0);
    }
});