Где использовать функцию готовности документа?

Question

Я новичок в JavaScript. Я объединил несколько файлов JavaScript в один, но теперь иногда браузеры (особенно firefox) зависают на 2-3 секунды. Пожалуйста, посмотрите на мой 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");
});

Что с этим не так? Пожалуйста, не обращайте внимания на локализованные сообщения. Мой вопрос о файловой структуре. Я использовал несколько функций и не знаю, какая часть сломана, или это неправильный стиль кодирования, который заставляет браузеры зависать.

Заранее спасибо

Answer 1

Проблема обычно не в коде Javascript (и я не смотрел на ваш код), а в порядке загрузки на вашей HTML-странице.Чтобы улучшить поведение при загрузке, вы должны добавить теги Javascript внизу вашей страницы.Причиной этого является то, что браузер должен загружать и выполнять Javascript последовательно (так как сценарии могут зависеть друг от друга), в то время как все остальное может выполняться в основном параллельно.

Answer 2

Ничто в этом коде не кажется мне слишком медленным, поэтому это может быть не JavaScript. Я бы порекомендовал загрузить всю вашу веб-страницу и профилировать ее. Профилирование может пролить больше света на ситуацию. В FireFox вы можете проверить FireBug или использовать Shark .

В FireBug одним из способов начать профилирование является использование Javascript следующим образом.

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

В приведенном выше примере комментарий представляет ваш код выше, что делает все готово. Брось их куда хочешь. «ProfileName» может быть изменено на любое имя, которое вы хотите назвать этот конкретный профиль. Я бы вставил пару таких в ваш код, чтобы вы могли видеть, что случилось.