Question

I’m a newbie to JavaScript. I merged multiple JavaScript files into one, but now sometimes browsers (especialy firefox) freeze for 2-3 seconds. Please take a look at my JavaScript.

$(document).ready(function(){
$(".static_class").click(function(){
     var $select = $("select[name=class]");
     var start = $(this).val() === "1"?5:9;
if($(this).val()==="1") 
{
    $("#exp").hide(); 
    $("#abt").hide(); 
    $("#bac").hide();  
    $("#scholar").show("slow");
    var end = start + 7;
    } 

if($(this).val()==="2") 
{
    $("#exp").hide(); 
    $("#scholar").show("slow"); 
    $("#bac").hide(); 
    $("#abt").show("slow");
    var end = start + 3;
    }  

if($(this).val()==="3") 
{
    $("#exp").hide(); 
    $("#bac").show("slow"); 
    $("#scholar").hide(); 
    $("#abt").show("slow");
    } 

if($(this).val()==="4")  
{
    $("#abt").hide(); 
    $("#scholar").hide(); 
    $("#exp").show("slow"); 
    $("#bac").hide(); }


$select.empty();
$select.append("<option value='0'>Sinif seçin</option>");
for(;start < end;start++){
$select.append("<option value='"+start+"'>"+start+"</option>");
}

    });
/*placeholder*/

if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}
/*populate*/

    $("#school").hide();
    $("#class").hide();
    searchSchool = function(regionSelect){
    var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
    if (selectedRegion!='0'){
    $.ajax({
    type: "POST",
    url : "core/code/includes/search.php",
    data: {region_id: selectedRegion},
    success: function(result, status, xResponse){
        if (result!=''){
            $("#school").show();
            $("#class").show();
            $("#school").html(result);
            $("#error").hide("slow");
        }
        else{
            $("#error").html("Bu regionda məktəb yoxdur");
            $("#error").show("slow");
            $("#school").html('');
            $("#school").hide();
            $("#class").hide();
        }
    },
    error: function(e){
        alert(e);
    }
    });
    }
    else{
    $("#error").html('Xahiş edirik region seçin');
    $("#error").show("slow");
    $("#school").html('');        
    $("#school").hide();
    $("#class").hide();
    }
    }

  $("#reg").RSV({
    onCompleteHandler: myOnComplete,
    rules: [
       "required,fname,Adınızı daxil edin",
       "required,mname,Atanızın adını daxil edin.",
       "required,lname,Soyadınızı daxil edin.",
       "required,email,Email adresinizi daxil edin.",
       "valid_email,email,Email adresinizi düzgün daxil edin.",
       "required,login,İstifadəçi adınızı daxil edin.",
       "length>2,login,İstifadəçi adınız 2 hərfdən çox olmalıdır.",
       "required,pwd,İstifadəçi adınızı daxil edin.",
       "required,type,İstifadəçi tipini seçin.",
       "if:type=1,required,region,Rayonu daxil edin",
       "if:type=1,required,school,Məktəbi daxil edin",
       "if:type=1,required,class,Sinfi daxil edin",
       "if:type=2,required,region,Rayonu daxil edin",
       "if:type=2,required,school,Məktəbi daxil edin",
       "if:type=2,required,class,Sinfi daxil edin",
       "if:type=2,required,group,Qrupu daxil edin",
       "if:type=3,required,subject,Fənni daxil edin"
    ]
  });


});

function myOnComplete()
  {
    alert("The form validates! (normally, it would submit the form here).");
    return true;
  }

jQuery(function($){
   $("#dob").mask("99.99.9999");
});

What’s wrong with it? Please disregard localized messages. My question is about file structure. I used multiple functions and don’t know what part is broken or if this is the wrong style of coding that makes browsers freeze.

Thank you in advance

Answer 1

The problem is usually not within the Javascript code (and I didn’t look at you code), but with the load order within your HTML page. In order for a a better load behavior, your should add the Javascript tags to the bottom of your page. The reason behind this is, that the browser has to load and execute Javascript sequentially (as the scripts may depend on each other), while the rest can be done mostly in parallel.