jqGrid - ローカル操作の速度をどのように追跡することができますか

Question

2つのアプリケーションを作成して割り当てを受けました。最適化されていないものと最適化されていないものがあり、DBからのデータを表示するのにjqGridを使用しています。

私は正常に両方を作成しましたが、私はローカルオペレーション（ページング、検索、並べ替え）が完了したときの速度を追跡したいと思います。

私は、操作をトリガする各ボタンのイベントを設定しようとしましたが、トリガしていないようです... jqGridに組み込まれているものがあれば、私はこれを解決するのに役立ちます。

マイjqGridコードはこのように書きます：

$(function() { 
    var colModelSettings = [ 
     {name:'id', label:'id',key: true, hidden: true, width:10,sorttype:'number',editable: true},  
     {name:'judet',label:'Judet',width:70, align: 'center',editable:true}, 
     {name:'localitate',label:'Localitate',width:80,editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'}, 
     {name:'tipStrada',label:'tipStrada',editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},width:100,align: 'center' }, 
     {name:'denumire',label:'denumire',editable:true,width:100,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'}, 
     {name:'cod',label:'cod',width:90,editable:true,align: 'center'} 
     ]; 
    var beforeEvent = 0;  
    $("#gridAdrese").jqGrid({ 
     pager: $("#pagerGrid"), 
     url: "/UnoptimizedProject/rest/fetchData", 
     datatype: "json", 
     mtype: "POST", 
     loadonce: true, 
     forceClientSorting:true, 
     height: window.innerHeight-250, 
     sortname: 'id', 
     ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
     serializeGridData: function (postData) { 
      if (postData.searchField === undefined) postData.searchField = null; 
      if (postData.searchString === undefined) postData.searchString = null; 
      if (postData.searchOper === undefined) postData.searchOper = null; 
      return JSON.stringify(postData); 
     }, 
     rowNum: 5000, 
     viewrecords: true, 
     loadComplete: function(){ 
      if(beforeEvent !== undefined){ 
       var afterEvent = new Date().getTime(); 
       console.log(afterEvent- beforeEvent); 
       beforeEvent = 0; 
      } 
     }, 
     sortorder: 'asc', 
     caption:'Coduri Postale Neoptimizat' , 
     autowidth: true, 
     colModel: colModelSettings, 
    }); 
    $("#gridAdrese").jqGrid('navGrid', "#pagerGrid", {edit:false, add:false, del:false, save:false, cancel:false, search:true, searchtext: 'Search', refresh: false}); 

    $("#jqgh_gridAdrese_judet, #jqgh_gridAdrese_localitate, #jqgh_gridAdrese_tipStrada, #jqgh_gridAdrese_denumire, #jqgh_gridAdrese_cod ").on("click",function(){ 
     beforeEvent = new Date().getTime(); 
     console.log("Sorting"); 
    }) 
    $("#fbox_gridAdrese_search").on("click",function(){ 
     beforeEvent = new Date().getTime(); 
     console.log("searching"); 
    }); 

    $("#next_pagerGrid , #last_pagerGrid, #prev_pagerGrid, #first_pagerGrid").on("click",function(){ 
     beforeEvent = new Date().getTime(); 
     console.log("paging"); 
    }) 
}); 

Answer 1

あなたは以下について行うことができます。

var startTime, measureTime = false, timeInterval, 
    startMesure = function() { 
     startTime = new Date(); 
     measureTime = true; 
    }; 

startMesure(); 
$("#gridAdrese").jqGrid({ 
    url: "/UnoptimizedProject/rest/fetchData", 
    ... 
    onSortCol: function() { 
     startMesure(); 
    }, 
    onPaging: function (pgButton, options) { 
     //if (pgButton === "records") { 
      startMesure(); 
     //} 
    }, 
    searching: { 
     closeAfterSearch: true, 
     closeAfterReset: true, 
     closeOnEscape: true, 
     searchOnEnter: true, 
     beforeSearch: function() { 
      startMesure(); 
      return false; // allow filtering 
     }, 
     onSearch: function() { 
      startMesure(); 
     }, 
     onReset: function() { 
      startMesure(); 
     }, 
    }, 
    loadComplete: function() { 
     if (measureTime) { 
      timeInterval = new Date() - startTime; 
      setTimeout(function() { 
       alert("Total loading time: " + timeInterval + "ms\nFull time: " + 
        (new Date() - startTime)); 
      }, 50); 
      measureTime = false; 
     } 
    } 
}).jqGrid("filterToolbar").jqGrid("navGrid"); 

我々は、ソート、ページングの初めに現在の時間にstartTime = new Date();のに対しstartTimeをリセットまたはフィルタリングする。