當下拉值變化時，提高jquery的性能

Question

當更改值隱藏和顯示其他字段時，我有一個下拉列表。目前它在8GB執行1s，其他一些帶2G或4G的PC需要5s執行碼。在Firefox中，與鉻合金相比，Safari需要更多的時間。

我的代碼：

<?php 
     $this->widget('application.extensions.select2.XSelect2', array(
      'model'=>CampaignPostCodeModel::model(), 
      'attribute'=>'crm_campaign_post_code_id', 
      'data'=> $tt_fields, 
      'events'=>array(
      'change'=>"js:function (element) {    
       recalldelay(this);}"),    
      'htmlOptions'=>array(
       'style'=>'width:220px', 'id'=>'postcode', 'prompt'=>utf8_encode(yii::t('operator','SelectField'))  
      ),)); 
?> 

<script type="text/javascript"> 

function recalldelay(elem){ 
    $('#ok').attr('disabled',true); 
    $.ajax({ 
     type: 'POST', 
     url: "<?php echo CController::createUrl('operator/RecallDelay'); ?>", 
     update: '#postcode_id', 
     data: {"postcode_id":document.getElementById("postcode").value,"taskid":'<?php echo $taskid?>',"team":'<?php echo $is_team?>'}, 
     success: function(data){ 

      $('#recallby').select2('destroy'); 
      $('#recallby').prop('disabled', true); 
      $("#recallby").html(''); 
      $('#recallby').select2(); 
      $('#recalldate').attr('disabled','disabled'); 
      $("#trans_recallby").html(''); 
      $("#trans_recalldate").val(''); 
      $('#recalldate').val(''); 
      $('#lbl_trans_recalltime').hide(); 
      $('#trans_recalldate').hide(); 
      $('#lbl_trans_recallby').hide(); 
      $('#trans_recallby').select2('container').hide(); 
      $('#fld_set').hide(); 
      $('#fld_trans_set').hide(); 


     if (data.trim() != "" && data != null) 
     { 
      var obj = data.split(","); 
      if(obj[0] == "Standard"){ 
       $('#fld_set').show(); 

       $("#recallby").html(""); 
       $('#recallby').select2('destroy'); 
       if (<?php echo $is_team?> != 1) 
       $('#recallby').prop('disabled', true); 
       else 
        $('#recallby').prop('disabled', false); 
       $('#recallby').select2(); 
       var $str = $.trim(obj[1]).substr (0,$.trim(obj[1]).lastIndexOf (" ") + 1); 
       var $date = $str.split("-"); 
       var $str1 = $.trim(obj[1]).substr ($.trim(obj[1]).lastIndexOf (" ") + 1,$.trim(obj[1]).length); 
       var $time = $str1.split(":"); 
        $("#recalldate").datetimepicker({ 
         dateFormat: 'yy-mm-dd H:i' 
        }).datetimepicker("setDate",new Date($date[0],$date[1]-1,$date[2],$time[0],$time[1])); 

      } 
      else if(obj[1] == "Assigned"){ 
       $('#fld_set').show(); 

       $("#recallby").html(obj[0]); 
       $('#recallby').select2('destroy'); 
       $('#recallby').prop('disabled', false); 
       $('#recallby').select2(); 
       $('#cal_btn').show(); 
       var str = $.trim(obj[2]).substr (0,$.trim(obj[2]).lastIndexOf (" ") + 1); 
       var date = str.split("-"); 
       var str1 = $.trim(obj[2]).substr ($.trim(obj[2]).lastIndexOf (" ") + 1,$.trim(obj[2]).length); 
       var time = str1.split(":"); 
        $("#recalldate").datetimepicker({ 
         dateFormat: 'yy-mm-dd H:i' 
        }).datetimepicker("setDate",new Date(date[0],date[1]-1,date[2],time[0],time[1])); 
      } 
      else if($.trim(obj[0]) == "Previous"){ 
       $('#fld_set').show(); 
       $('#cal_btn').hide(); 
       if (<?php echo $is_team?> != 1) 
        $('#recallby').prop('disabled', true); 
        else 
         $('#recallby').prop('disabled', false); 
       $('#recalldate').prop('disabled','disabled'); 
      } 
      else if(obj[1] == "Transfer"){ 

       if (obj[2] == 1) 
       { 
        $('#fld_trans_set').show(); 
        $('#lbl_trans_recalltime').show(); 
        $('#trans_recalldate').show(); 
       } 
       if (obj[3] == 1) 
       { 
        $('#fld_trans_set').show(); 
        $('#lbl_trans_recallby').show(); 
        $("#trans_recallby").html(obj[0]); 
        $('#trans_recallby').select2('destroy'); 
        $('#trans_recallby').prop('disabled', false); 
        $('#trans_recallby').select2(); 
        $('#trans_cal_btn').show(); 
       } 
       if (obj[3] == 0 || obj[3] == 2) 
       { 
        $('#fld_trans_set').show(); 
        $('#lbl_trans_recallby').show(); 
        $("#trans_recallby").html(obj[0]); 
        $('#trans_recallby').select2('destroy'); 
        $('#trans_recallby').prop('disabled', true); 
        $('#trans_recallby').select2(); 
        if (obj[3] == 2) 
         $('#trans_cal_btn').show(); 
        else 
         $('#trans_cal_btn').hide(); 
       } 

      } 
      else if($.trim(obj[0]) == "SuccessRecall") 
      { 

       $('#fld_trans_set').hide(); 
       $('#fld_recallby').hide(); 
       $('#fld_set').show(); 
       $('#recalldate').removeAttr('disabled'); 
        $("#recalldate").datetimepicker({ 
         dateFormat: 'yy-mm-dd H:i', 
          timeFormat: 'hh:mm' 
        }).datetimepicker("setDate",new Date()); 
      } 
      else{ 
       $('#fld_set').show();    
       $("#recallby").html(obj[0]); 
       $('#recallby').select2('destroy'); 
       if (<?php echo $is_team?> != 1) 
        $('#recallby').prop('disabled', true); 
        else 
         $('#recallby').prop('disabled', false); 
       $('#recallby').select2(); 
       $('#cal_btn').show(); 
       var str = $.trim(obj[1]).substr (0,$.trim(obj[1]).lastIndexOf (" ") + 1); 
       var date = str.split("-"); 
       var str1 = $.trim(obj[1]).substr ($.trim(obj[1]).lastIndexOf (" ") + 1,$.trim(obj[1]).length); 
       var time = str1.split(":"); 
        $("#recalldate").datetimepicker({ 
         dateFormat: 'yy-mm-dd H:i' 
        }).datetimepicker("setDate",new Date(date[0],date[1]-1,date[2],time[0],time[1])); 

      } 


      if($.trim(obj[0]) != "Previous") 
      $('#recalldate').removeAttr('disabled'); 
     } 
     else{ 
      $('#fld_set').hide(); 

      $('#fld_trans_set').hide(); 
     }    
     $('#ok').attr('disabled',false); 
      } 
     }); 
} 
</script> 

請人幫助我提高的代碼1S在所有PC執行性能。

Answer 1

嘗試找出哪些代碼片段的時間花在大量。 您可以在某個代碼塊前後插入時間戳，以瞭解需要多長時間或使用第三方程序（如Yslow）。
然後，您需要分析該片段，看看它是否可以優化。
從我注意到了看代碼：

• 消除重複使用變量即

  var $recallBy = $('#recallby'); 
  $recallBy.html(obj[0]); 
  $recallBy.select2('destroy'); // etc 
  

• ，而不是使用如果(val=1) else if (val=2)複製jQuery的搜索..使用switch(val)即

  switch(obj[1]) { 
      case 'Standard' : <code> 
      case 'Previous' : <code> 
      case 'SuccessRecall' : <code> 
      // etc 
      }