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查找它們。