从 $(document).ready 调用 Jquery 函数花费太长时间 - IE 弹出“停止运行脚本”对话

Question

我有以下脚本来模仿 html 中的“freezepane”功能，就像在 Excel 中一样，当用户滚动结果表时，右侧和标题都会滚动。

fnAdjustTable=function(){

    var colCount=$('#firstTr>td').length; //get total number of column

    var m=0;
    var n=0;
    var brow='mozilla';
    jQuery.each(jQuery.browser, function(i, val) {
        if(val==true){

            brow=i.toString();
        }
    });
    $('.tableHeader').each(function(i){
        if(m<colCount){

            if(brow=='mozilla'){
                $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td

                $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
            }
            else if(brow=='msie'){
                $('#firstTd').css("width",$('.tableFirstCol').width());

                $(this).css('width',$('#table_div td:eq('+m+')').width());//In IE there is difference of 2 px
            }
        }
        m++;
    });

    $('.tableFirstCol').each(function(i){
        if(brow=='mozilla'){
            $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight()-1);//for providing height using scrollable table column height
        }else if(brow=='msie'){

            $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight());
        }else{
            $(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
        }
        n++;
    });



}

fnScroll=function(){

    $('#divHeader').scrollLeft($('#table_div').scrollLeft());
    $('#firstcol').scrollTop($('#table_div').scrollTop());
}

问题是，当迭代“tableFirstCol”tds 时，会弹出停止运行脚本的错误。有没有更有效的方法来做到这一点？

本质上，该脚本正在调整每个顶部标题和侧窗格的大小以匹配第一行/列的宽度。如果我使用较大的日期范围（侧标题）运行报告，通常当侧标题行大约超过 30 行时，脚本就会弹出。

任何帮助表示赞赏！

Answer 1

您需要缓存选择器：

var tableDiv = $('#table_div'),
    divHeader = $('#divHeader'),
    firstcol = $('#firstcol'),
    tableFirstCol = $('.tableFirstCol'),
    tds = $('td', tableDiv);

您可以将 .eq(n) 用于列选择器。

当 this.style.height = n; 时，不要使用 $(this).css("height", n);更容易、更快。

这：

$('.tableHeader').each(function(i){
    if(m<colCount){
        /* ... */
    }
    m++;
});

应该是：

$('.tableHeader').each(function(i){
    if(i<colCount){
        /* ... */
    }
});

并且我不完全确定您甚至需要 i 检查（但我必须查看 HTML）。

浏览器嗅探可能是没有必要的。尝试应用重置样式表和有效的 doctype 或使用 HTML5Boilerplate。

如果您必须浏览器嗅探：您可以只使用：

if($.browser.mozilla){
    /* ... */
}
else if ($.browser.msie){
    /* ... */
}
else{
    /* ... */
}

您也可以将该代码压缩很多。查找DRY 原则。

另外，至于设置tableFirstCol的高度，你不能只设置行的高度吗？

Answer 2

您可以为每列和行生成带有 id 标记的 HTML。然后只需按名称进行选择即可，而无需使用复杂的选择器。

我想说 $('#table_div td:eq('+colCount*n+')') 是一个复杂的选择器，而 $('#row1') 是容易多了。

另外 - 我相信你为浏览器检查所做的事情是行不通的。您拥有的代码会迭代检测到的浏览器的所有属性，并将 brow 值设置为最后一个。使用 $.browser.webkit 等内容来检查 webkit，使用 $.browser.msie 来检查 IE，而不是使用现有的循环。正如您现在的代码一样，我认为您将始终执行 else 情况。有关 jQuery 浏览器对象的更多信息，请参见此处： http://api.jquery.com/jQuery.browser/