开发者

Where to use document ready function?

开发者 https://www.devze.com 2023-04-01 14:40 出处:网络
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.

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: fu开发者_如何学Pythonnction(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


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.


Nothing in that code strikes me as being too terribly slow, so it may not be JavaScript. I would recommend loading up your entire web page and profile it. Profiling may shed more light on the situation. In FireFox you can check out FireBug or use Shark.

In FireBug, one way to start profiling is to put use Javascript like the following.

<script>
console.profile('ProfileName')
// insert code to profile
console.profileEnd()
</script>

In the above example, the comment represents your code above that does the whole on ready thing. Throw these around anywhere you want. The "ProfileName" can be changed to whatever name you want to call this particular profile. I would stick a couple of these throughout your code so you can see what's up.

0

精彩评论

暂无评论...
验证码 换一张
取 消