更改下拉值时提高 jquery 的性能

Question

我有一个下拉列表，在更改值隐藏和显示其他字段时。目前它在 8GB 中执行 1s，其他一些具有 2G 或 4G 的 PC 需要 5s 来执行代码。在 Firefox 中，与 chrome 、 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>

请任何人帮助我提高代码在所有 PC 中以 1S 执行的性能。

Answer 1

尝试找出大量时间花费在哪个代码片段上。 您可以在某些代码块之前和之后插入时间戳以了解需要多长时间或使用 3rd 方程序（例如 Yslow）。
然后您需要分析该片段以查看它是否可以优化。
根据我通过查看代码所注意到的：

• 通过重用变量来消除重复的 jQuery 搜索，即

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

• 而不是使用 if (val=1) else if (val=2) .. 使用 switch(val) 即

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