ie8用于jquery循环/ .each的慢速脚本消息

时间:2013-04-16 15:16:34

标签: jquery internet-explorer-8 performance

在ie8中,我正在抛出以下消息

“此页面上的脚本导致Internet Explorer运行缓慢”

当更改触发以下代码的选择框时会发生这种情况,我知道用php执行此操作会更好,但不幸的是,这不是一个选项。

代码显示从下拉列表中选择的场地上传递的事件。选择场地后,所有不在该场地的活动都将被隐藏。

运行代码的页面是http://sussexpast.co.uk.blueplanetdns.com/events

由于

jQuery(function($) {

    function hideMonths(){
        var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
        for( var i = 0; i < months.length; i++ ){
            //alert(months[i]);
            $('.events-list .post:visible .event-month:contains('+months[i]+')').not(':first').css('visibility','hidden');
        }
    }

    $(document).ready(function(){
        hideMonths();
    });

    $('.event-location-filter select').change( function() {
        var selectedProperty = $(this).val();
        //alert(selectedProperty);
        $('.post').each( function(){
            $(this).show()
            var eventProperty = $(this).find('.venue a').text();
            //alert(eventProperty);
            if( selectedProperty == 'Select a location' ){
                $(this).show()
                hideMonths();
            }
            else{
                if( eventProperty !== selectedProperty ){
                    $(this).hide()
                    $('.events-list .event-month').css('visibility','visible');
                    hideMonths();
                }
            }
        });
    });

});

1 个答案:

答案 0 :(得分:1)

缓存大部分选择器,以便在每次迭代时不搜索整个dom。

function hideMonths(){
    var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
    var $eventMonths = $('.events-list .post:visible .event-month').not(':first');
    for( var i = 0; i < months.length; i++ ){
        //alert(months[i]);
        $eventMonths.filter(':contains('+months[i]+')').css('visibility','hidden');
    }
}

我也认为没有理由为每个帖子做这件事,而是在.each之后做。

    $('.post').each( function(){
        $(this).show()
        var eventProperty = $(this).find('.venue a').text();
        //alert(eventProperty);
        if( selectedProperty == 'Select a location' ){
            $(this).show()
            //hideMonths();
        }
        else{
            if( eventProperty !== selectedProperty ){
                $(this).hide()
                $('.events-list .event-month').css('visibility','visible');
                //hideMonths();
            }
        }
    });
    hideMonths();