Improve performance in jquery when change in drop down value

Question

I have a drop down list , when changing value hiding and displaying some other fields.Currently its executing 1s in 8GB , some other PC with 2G or 4G it takes 5s to execute the code. In firefox it takes some more time compared to chrome , safari.

My Code:

 <?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>

Please anyone help me to improve the performance of code to execute in 1S in all PCs.

Answer 1

Try find out on which code fragment the time is spend in big volume. You can insert time stamp before and after some code block to find out how long it takes or use 3rd party program (such as Yslow).
Then you need to analyze that fragment to see if it could be optimized.
From what I noticed by looking at the code:

• eliminate duplicate jQuery searches by reusing variable ie

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

• instead of using if (val=1) else if (val=2) .. use switch(val) ie

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