jQuery .each()备选方案未正确循环 [英] jquery .each() alternative is not looping properly

问题描述

希望我只是想念一些东西，这很简单...

Hopefully I'm just missing something and this is simple...

我有一个页面，该页面循环浏览URL列表，使用jquery对它们进行Ajax调用，从返回的HTML中获取数据，并将其显示在表中.这些调用工作正常.由于要实时获取这些数据需要一段时间(可能最多需要5分钟才能遍历列表，返回数据，显示等等)，因此在如此繁重的处理过程中，Chrome和IE等浏览器会锁定"-实际上，Chrome定期显示页面无响应"消息，而IE似乎只是挂起，然后突然在屏幕上显示结果.

I have a page that loops through a list of URL's, makes Ajax calls to them (with jquery), grabs data from the HTML that is returned, and displays it in a table. These calls work fine. Since grabbing this data in real-time takes a while (possibly up to 5 minutes to loop through the list, return data, display it, etc..) browsers like Chrome and IE 'lock up' during this heavy processing -- Chrome actually periodically shows the 'Page Unresponsive' message, while IE just appears to be hanging, then all of a sudden, results show on the screen.

为解决此问题，我研究了如何优化jQuery .each()函数，并找到了一个名为 slowEach (

To solve this, I researched how to optimize the jQuery .each() function and found a custom plugin called slowEach (LINK) which basically inserts a small timeout after each loop iteration -- so that the browser gets a response, and doesn't think the client is unresponsive. I've updated my code to call the slowEach plugin instead of .each and everything works fine, ALMOST! It seems that after the first iteration -- the plugin actually executes extra code -- all the way to the end of my callback function, then suddenly wants to jump back into the loop and continue the rest of the iterations correctly.

我很难找到原因.

这是我的代码(parseXml只是处理一些XML数据的回调函数):

Here is my code (parseXml is just a callback function that processes some XML data):

function parseXml(x)
{
  var $rowArray = $(x).find("[nodeName=z:row]");

   $rowArray.slowEach(250, function(index) {  
     // ... processing each returned row
    });
// ... extra processing after the loop is completed.  Show data on the screen.
};

这是slowEach插件:

Here is the slowEach plugin:

$.slowEach = function( array, interval, callback ) {
        if( ! array.length ) return;
        var i = 0;
        next();
        function next() {
            if( callback.call( array[i], i, array[i] ) !== false )
                if( ++i < array.length )
                    setTimeout( next, interval );
        }
    };

    $.fn.slowEach = function( interval, callback ) {
        $.slowEach( this, interval, callback );
}; 

此代码以某种方式进入我代码的额外处理"部分-仅在循环的第一次迭代中.很奇怪.也许有些额外的注意可以帮助我理解代码为什么要这样做.让我知道是否需要更多信息！谢谢.

This code somehow gets to the 'extra processing' part of my code -- only on the first iteration through the loop. Very odd. Maybe some extra eyeballs can help me understand why the code is doing this. Let me know if more information is needed! Thanks.

推荐答案

当.slowEach使用setTimout时，它实质上推迟了该函数(each函数的内容)的执行，直到完成所有其他页面处理为止.因此，slowEach调用之外的代码将全部执行，包括调用后的代码.您需要做的是将// ... extra processing ...代码添加到.sloweach函数中，以便在处理完所有项目后调用该函数.

When .slowEach uses setTimout, it essentially defers that function's (the content of the each function) execution until all other page processing is done. Therefore the code outside of the slowEach calls will all execute, including the code after it's called. What you need to do is add another function to the .sloweach function to call after all the items are processed, and put your // ... extra processing ... code there.

未经测试的代码，但这应该可以工作，或者至少可以使您朝正确的方向前进:

Untested code, but this should work or at least get you going in the right direction:

function parseXml(x)
{
  var $rowArray = $(x).find("[nodeName=z:row]");

   $rowArray.slowEach(250, function(index) {  
        // ... processing each returned row
    }, function() {
        // ... extra processing after the loop is completed.  
        // Show data on the screen.
    });
};

更改插件:

$.slowEach = function( array, interval, callback, onCompletion ) {
        if( ! array.length ) return;
        var i = 0;
        next();
        function next() {
            if( callback.call( array[i], i, array[i] ) !== false )
                if( ++i < array.length )
                    setTimeout( next, interval );
                else
                    setTimeout( onCompletion, interval );
        }
    };

    $.fn.slowEach = function( interval, callback, onCompletion  ) {
        $.slowEach( this, interval, callback, onCompletion  );
}; 

这篇关于jQuery .each()备选方案未正确循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！