Firefox在调用函数(jquery)时冻结

Question

当调用函数removeCell()时，firefox会冻结。

我使用这个函数来隐藏一些网格单元格，具体取决于窗口宽度
函数在网格准备好后调用rigth，并为每个窗口调整大小
在Chrome和Opera中运行得很好，但在Firefox中，它在第一次调用后就卡住了。

function removeCell(){
    headerResize();
    if (($('.section .header .cell:last-child').position().left + $('.section .header .cell:last-child').width()) > 
        $('.section .header').position().left + $('.section .header').width())
    {
        var priority = $body_grid_header[0].priority;
        var index    = 0;
        for(var i in $body_grid_header){
            if(bool($body_grid_header[i].visible) && $body_grid_header[i].priority > priority){
                priority = $body_grid_header[i].priority;
                index    = i;
            }
        }
        $body_grid_header[index].visible = 0;
        $('.grid .header .cell:nth-child('+ (parseInt(index)+2) +')').addClass('hidden');
        $hiddenArray.unshift(index);
        headerResize();
        removeCell();
    }
    else
    {
        //console.log($body_grid_header);
        var firstCell   = $('.grid .header .cell:first-child').width();
        var lastCell    = $('.grid .header .cell:last-child').width();
        var headerWidth = $('.grid .header').width();
        var cellCount   = $('.grid .header .cell').not(':first').not(':last').not('.hidden').length;
        if ((cellCount*100 + 100+firstCell+lastCell < headerWidth) && (cellCount < $body_grid_header.length))
        {
            var index = $hiddenArray[0];
            $hiddenArray.splice(0,1);
            $body_grid_header[index].visible = 1;
            $('.grid .header .cell:nth-child('+ (parseInt(index)+2) +')').removeClass('hidden');
            headerResize();
            removeCell(); //I GUESS IT STUCKS HERE!
        }
    }
}

function headerResize(){
  var firstColl = $('.grid .header .coll:first-child').width();
  var lastColl  = $('.grid .header .coll:last-child').width();
  var headerWidth   = $('.grid .header').width() - firstColl - lastColl;
  var collCount = $('.grid .header .coll').not(':first').not(':last').not('.hidden').length;
  var collWidth     = headerWidth / collCount - 1; //-1 = border-left
  if(collWidth < 100) collWidth = 100;
  $('.section .header .coll').not(':first').not(':last').width(collWidth);
  $('.section .content .coll:not(:first-child)').width(collWidth);

}

Answer 1

代码可以在任何浏览器中造成死锁，因为它可以归结为：

removeCell() {
     removeCell();
}

唯一能防止这种情况发生的是else分支中的if()：

if ((cellCount*100 + 100+firstCell+lastCell < headerWidth) && (cellCount < $body_grid_header.length))

如果这个条件是错误的，你就有一个无休止的循环。

与递归调用不同，您应该真正使用循环，并在删除所有单元格后中断循环。

Answer 2

很难遵循，很难在本地测试：-）

要尝试，请更改

if ((cellCount*100 + 100+firstCell+lastCell < headerWidth) && (cellCount < $body_grid_header.length))

至

if ((cellCount*100 + 100+firstCell+lastCell < headerWidth) && $hiddenArray.length)

希望它能起作用。。。