javascript - 优化数据循环

Question

我有一个包含 20,000-150,000 行的网格，只需单击一下，我就可以选择所有行，然后我使用此调用来批准它们。
这适用于少于 1000 行，但超过之后浏览器就会锁定并且永远不会完成，即使我将其单独放置 20 分钟后也是如此。

我正在寻找能够优化此流程的解决方案。

$("#approval").on('click',function(){
    var thisgrid = Grid; //my gridwapper
    var spotrows = thisgrid.grid.getSelectedRows();

    var index = 0;

    // console.dir(spotrows);

    if(typeof spotrows.length == 'undefined' || spotrows.length == 0)
    {
        alert('Please select a spot.');
        return;
    }

     for(key in spotrows)
     {

     var spotupdate = {};

     thisgrid.grid.invalidateRow(spotrows[key]);
     spotupdate = thisgrid.dataview.getItem(spotrows[key]);
     spotupdate['Approved'] = (spotupdate['Approved'] == 1) ? 0 : 1;

     thisgrid.dataview.updateItem(spotupdate['id'],spotupdate);


     }
    thisgrid.dataview.refresh();


});

Answer 1

浏览器锁定的原因是 JavaScript(和 UI)在单个线程中运行。这意味着，只要代码正在执行，浏览器就无法处理 UI 事件(单击、重新绘制等)。

在保持 UI 响应能力的同时处理大量数据的一种方法是将循环分解为多个较小的函数调用，并使用 setTimeout 对下一个循环段进行排队。像这样的事情:

$("#approval").on('click',function(){
    var thisgrid = Grid; //my gridwapper
    var spotrows = thisgrid.grid.getSelectedRows();

    function iterate(rows){
        var max = 1000, count = 0;
        for(key in rows){
            // do stuff

            delete rows[key];
            count++;
            if(count == max) {
                setTimeout(function(){
                    iterate(rows);
                }, 0);
                break;
            }
        }
    }

    iterate(spotrows);

});

即使超时设置为 0 毫秒，这仍然有效，因为 setTimeout 确保在 JS 事件循环的下一次传递时调用该函数，从而为其他排队事件提供了机会待处理。

有关 JS 事件循环的更多信息 - http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/