Javascript日期过滤器的改进

我编写了javascript/jquery UI，它按日期过滤项目列表

一个

-用于一个项目

每个项目日期的每个

任务是显示项目是否至少有一个日期在datepicker的范围内。 如果某个项目没有日期，则需要将其隐藏

所以，一切都很好，但速度很慢

大约有300个项目和2000多个日期，当我的脚本解析数据时需要30秒以上

问题：有没有办法优化我的代码，或者我应该使用其他方法来完成这个任务

请看文章开头的小提琴

致以最良好的祝愿， 亚历克斯

/*为每个“发件人”和“收件人”字段创建日期+/-7*/
var prevWeek=新日期（）；
prevWeek.setDate（prevWeek.getDate（）-7）；
变量prevMonth=（prevWeek.getMonth（）+1）；
var prevDay=prevWeek.getDate（）；
var prevYear=prevWeek.getFullYear（）；
var prevWeekDate=（（prevMonth<10？'0'：''）+prevMonth+“/”+（prevDay<10？'0'：''）+prevDay+“/”+prevYear）；
/*log（'prevWeekDate='+prevWeekDate）*/
var nextWeek=新日期（）；
nextWeek.setDate（nextWeek.getDate（）+7）；
var nextMonth=（nextWeek.getMonth（）+1）；
var nextDay=nextWeek.getDate（）；
var nextYear=nextWeek.getFullYear（）；
变量nextWeekDate=（（下一个月<10？'0'：''）+nextMonth+“/”+（下一个月<10？'0'：''）+nextDay+“/”+nextYear）；
/*log（'nextWeekDate='+nextWeekDate）*/
/*函数-日期选择器设置*/
$（函数（）{
$（“#from”）.datepicker({
默认日期：“-1w”，
变化月：对，
月数：1，
onClose：函数（selectedDate）{
$（“#至”）.datepicker（“选项”，“minDate”，selectedDate）；
//console.log（selectedDate）；
filterDates（）；
} });
$（“#到”）。日期选择器({
默认日期：“+1w”，
变化月：对，
月数：1，
onClose：函数（selectedDate）{
$（“#from”）.datepicker（“选项”，“maxDate”，selectedDate）；
//console.log（selectedDate）；
filterDates（）；
} });
});
/*将日期字符串解析为数组*/
函数dateToArray（日期）{
var dateArray=date.split（'/'）；
返回日期数组；
}
函数filterDates（）{
var from=dateToArray（$（'#from'）.val（））；
//console.log（来自）；
var from=新日期（parseInt（从[2]开始，10），
parseInt（从[0]，10）-1，
parseInt（来自[1]，10]）；
//console.log（来自）；
var to=dateToArray（$（'#to'）.val（）；
//console.log（to）；
var to=新日期（parseInt（to[2]，10），
parseInt（到[0]，10）-1，
parseInt（to[1]，10））；
//console.log（to）；
$（'.block'）。每个（函数（）{
var itemId=$（this.attr（'class'）；
var itemId=itemId.split（“”）；
var itemId=itemId[1]；
var displayBlock=false；
$（'.dataField_'+itemId）。每个（函数（）{
var inputValue=$（this.attr（'value'）；
var inputId=$（this.attr（'id'）；
//console.log（inputValue+“”+inputId）；
var testField=（$（this.attr（'value'））.split（'/'）；
console.log（testField）；
var testField=新日期（parseInt（testField[2]，10），
parseInt（testField[0]，10）-1，
parseInt（testField[1]，10））；
//console.log（testField）；
var结果=（测试字段<从| |测试字段>到）；
如果（！result）{displayBlock=true；}
});
如果（显示块）{
$（'.listItem#'+itemId）.removeClass（'hideItem'）；
}否则{
$（'.listItem#'+itemId）.addClass（'hideItem'）；
}
})
} 
$（文档）.ready（函数（）{
$（“#复选框”）。单击（函数（）{
if（$（“#checkAllBox”）.prop（'checked'））{
$（“.checkBoxItem”）.prop（“选中”，为真）；
}否则{
$（.checkBoxItem”）.prop（“选中”，false）；
}
});
$（“#from”）.val（上周日）；
$（“#至”）.val（下一个日期）；
$（“#对话框”）。对话框({
自动打开：错误，
宽度：600，
位置：[‘中间’，120]，
});
$（“.startDialog”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
filterDates（）；
$（'.listItem'）。单击（函数（）{
var itemId=$（this.attr（'id'）；
console.log（itemId）；
});
})

首先想到的是将日期保持为iso时间戳，并摆脱日期解析。因此，每个输入都有一个isoDate属性，看起来像“20130101”，而不是“01/01/2013”。选择边界的输入框也将返回这样的时间戳。然后您将能够比较原始字符串。试试这个，如果速度加快，请告诉我们

---

另一个想法是：您可以在页面的某个地方有一个数组，其中包含具有两个属性的对象：iso时间戳和对与时间戳关联的dom节点（需要隐藏的节点）的引用。数组将按时间戳排序，因此更容易根据边界进行过滤。预先填充对dom节点的引用也意味着您无需每次都通过dom查找它们。

请在此处发布代码，而不仅仅是

/* Create dates +/- 7 for each "from" and "to" fields */
    var prevWeek = new Date();
        prevWeek.setDate( prevWeek.getDate() - 7 );
    var prevMonth = ( prevWeek.getMonth() + 1 );
    var prevDay =  prevWeek.getDate();
    var prevYear = prevWeek.getFullYear();
    var prevWeekDate = (( prevMonth < 10 ? '0' : '' ) + prevMonth + "/" + (prevDay < 10 ? '0' : '' ) + prevDay + "/" + prevYear );
    /*console.log('prevWeekDate =' + prevWeekDate);*/

    var nextWeek = new Date();
        nextWeek.setDate( nextWeek.getDate() + 7 );
    var nextMonth = ( nextWeek.getMonth() + 1 );
    var nextDay = nextWeek.getDate();
    var nextYear = nextWeek.getFullYear();
    var nextWeekDate = (( nextMonth < 10 ? '0' : '' ) + nextMonth + "/" + ( nextDay < 10 ? '0' : '' ) + nextDay + "/" + nextYear );
    /*console.log('nextWeekDate =' + nextWeekDate); */


/*function - datepicker setup*/
    $(function() {

        $( "#from" ).datepicker({
            defaultDate: "-1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
                //console.log (selectedDate);
                filterDates();
        } });

        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                //console.log (selectedDate);
                filterDates();
        } });
    });

/*parse date string to array*/
    function dateToArray(date) {
        var dateArray = date.split('/');
        return dateArray;
    }


        function filterDates() {

            var from = dateToArray($('#from').val());
            //console.log (from);
            var from = new Date(parseInt(from[2], 10),
                                parseInt(from[0], 10) - 1,
                                parseInt(from[1], 10));
            //console.log (from);

            var to = dateToArray($('#to').val());
            //console.log (to);
            var to = new Date(  parseInt(to[2], 10),
                                parseInt(to[0], 10) - 1,
                                parseInt(to[1], 10));
            //console.log (to);

            $( '.block').each( function() {
                var itemId = $(this).attr('class');
                var itemId = itemId.split('_');
                var itemId = itemId[1];
                var displayBlock = false;

                $('.dataField_'+ itemId).each( function () {
                    var inputValue = $(this).attr('value');
                    var inputId = $(this).attr('id');

                    //console.log (inputValue + ' ' +inputId);

                    var testField = ($(this).attr( 'value' )).split('/');
                    console.log (testField);
                    var testField = new Date(   parseInt(testField[2], 10),
                                                parseInt(testField[0], 10) - 1,
                                                parseInt(testField[1], 10));
                    // console.log (testField);

                    var result = (testField < from || testField > to);

                    if (!result) { displayBlock = true; }

                });

                if (displayBlock) {
                    $('.listItem#' + itemId).removeClass('hideItem');
                } else {
                    $('.listItem#' + itemId).addClass('hideItem'); 
                }
            })
        } 

    $(document).ready(function(){

        $("#checkAllBox").click(function() {
            if ($("#checkAllBox").prop('checked')) {
                $(".checkBoxItem").prop( "checked", true );
            } else {
                $(".checkBoxItem").prop( "checked", false );
            }
        });

    $("#from").val(prevWeekDate);
    $("#to").val(nextWeekDate);


        $( "#dialog" ).dialog({
            autoOpen: false,
            width: 600,
            position:['middle',120],
        });

        $( ".startDialog").click(function() {
            $( "#dialog" ).dialog( "open" );
        });

        filterDates();

        $('.listItem').click(function(){
            var itemId = $(this).attr('id');
            console.log (itemId);            
        });
    })