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

Posted 2023-03-14

【中文标题】更改下拉值时提高 jquery 的性能

【英文标题】：Improve performance in jquery when change in drop down value

【发布时间】：2015-08-18 12:33:40

【问题描述】：

我有一个下拉列表，在更改值隐藏和显示其他字段时。目前它在 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 执行的性能。

【问题讨论】：

请告知如何改进此代码 $("#recalldate").datetimepicker( dateFormat: 'yy-mm-dd H:i' ).datetimepicker("setDate",new Date(日期[0],日期[1]-1,日期[2],时间[0],时间[1]));它会导致性能下降

【参考方案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
  

【讨论】：

使用 switch 它同时执行

你是sure? 多一个 if-else 开关更好。

只是出于好奇，您是否运行了一些工具来测量代码片段的性能？