【问题标题】:Where to use document ready function?在哪里使用文档准备功能?
【发布时间】:2011-08-29 12:59:07
【问题描述】:

我是 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");
});

它有什么问题?请忽略本地化消息。我的问题是关于文件结构的。我使用了多个功能,但不知道是哪一部分损坏了,或者这是否是导致浏览器冻结的错误编码风格。

提前谢谢你

【问题讨论】:

  • 没有人想点击链接查看代码。该网站非常支持将您的代码作为问题的一部分发布,所以请这样做
  • 这是一个提示,一个名为 jsfiddle 的网站,它有 JSLint,您可以使用它来帮助验证您可能遇到的任何问题,并且您确实有一些:jsfiddle.net/f663Y 点击顶部的 JSLint 按钮。
  • 另一种方法是在jsfiddle.net 中设置您的示例,这样更容易修改。检查您选择的浏览器的 javascript 控制台,是否包含任何警告、错误等?
  • Java 和 JavaScript 完全不同。是的,名称可能相似,但是,它们甚至不是同一个东西,不要这样标记它们。
  • 我将建议您不了解此代码并且没有编写大部分代码。你的风格的一部分将大括号放在一条线上并奇怪地缩进,后来它们是一致的并且间隔很好。你的所有代码甚至都不在这里,例如,无论 RSV 调用什么,它使用 jslint 会引发大约 10 个问题。

标签: javascript jquery document-ready


【解决方案1】:

问题通常不在 Javascript 代码中(而且我没有查看您的代码),而是在您的 HTML 页面中的加载顺序。为了获得更好的加载行为,您应该将 Javascript 标记添加到页面底部。这背后的原因是,浏览器必须按顺序加载和执行 Javascript(因为脚本可能相互依赖),而其余的大部分可以并行完成。

【讨论】:

    【解决方案2】:

    该代码中没有什么让我觉得太慢了,所以它可能不是 JavaScript。我建议加载您的整个网页并对其进行配置。剖析可能会更清楚地说明这种情况。在 FireFox 中,您可以查看 FireBug 或使用 Shark

    在 FireBug 中,开始分析的一种方法是使用 Javascript,如下所示。

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

    在上面的例子中,注释代表你上面的代码,它完成了所有准备好的事情。把这些扔到你想要的任何地方。 “ProfileName”可以更改为您想要调用此特定配置文件的任何名称。我会在你的代码中添加一些这样的东西,这样你就可以看到发生了什么。

    【讨论】:

    • 所有浏览器都正常加载我的ws,但firefox真的卡住了
    • 请解释我该怎么做?
    猜你喜欢
    • 2013-11-03
    • 2014-08-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-21
    • 2016-05-27
    相关资源
    最近更新 更多