javascript日期过滤器提高

Question

jsfiddle.net

我写了过滤日期的项目列表的JavaScript/jQuery UI的。

一个<li class="list-group-item listItem" id="0001"> - 一个项目。

每个<input type="hidden" id="01_0001" class="form-control dateItem dataField_0001" value="11/23/2012">为每个项目日期。

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

因此，一切正常，但速度很慢。

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

问题：有什么方法可以优化我的代码，或者我应该使用其他任何方法来完成此任务吗？

请在开机后看小提琴。

最好的问候， 亚历克斯

想到的

/* 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);    
     }); 
    }) 

Answer 1

第一个想法是保持时间存在ISO时间戳，并摆脱了日期解析。因此，每个输入都有一个isoDate属性，看起来像“20130101”，而不是“01/01/2013”​​。选择边界的输入框也会返回像这样的时间戳。然后你就可以比较原始字符串。试试这个，让我们知道如果速度提升。

另一个想法：您可以在包含具有两个属性的对象的页面中的某个位置使用数组：iso时间戳和与时间戳相关联的dom节点的引用（需要隐藏的节点）。该数组将按时间戳进行排序，因此基于边界进行筛选要容易得多。预先填充dom节点的引用也意味着您不需要每次都通过dom查找它们。