2012-01-19 62 views
1

我與約105字段一個html形式,其中包括一些javascript活性:大形式或JavaScript鎖定了瀏覽器

1)展開/摺疊部分

http://www.adipalaz.com/experiments/jquery/nested_accordion.html

2)日期選擇器

3)自動保存功能

<script type="text/javascript"> 
    function counter() { 
    email = document.getElementById("applicant-email").value; 
     if (email.match(emregex) || cd == cdLength){ 
      if (email.match(emregex)){ 
      document.getElementById("countdown").innerHTML = left + cd-- + right + button; 
      if (cd < 0){ 
       formAutosave(); 
      } 
      }else{ 
       document.getElementById("countdown").innerHTML = "Enter your email address for AutoSave <a onclick=\"javascript:alert(\'Please enter an email address\');\"><span><b></b>Save Now</span></a>"; 
      } 
     } 
    }; 
    function formAutosave() { 
     window.clearInterval(timer); 
    email = document.getElementById("applicant-email").value; 
     if (email.match(emregex)){ 
      document.getElementById("countdown").innerHTML = \'<a><span><b></b>Saving ...</span></a>\'; 
      var values = ""; 
    for (var i = 0; i < userForm.length; i++) { 
     if (userForm.elements[i].value != null) { 
      if (userForm.elements[i].name == "form[autosave]") { 
      userForm.elements[i].value = "TRUE"; 
        } 
        if (userForm.elements[i].id == "'.$fieldId.'"){ 
      userForm.elements[i].value = email; 
     } 
     if (userForm.elements[i].id != "finished"){ 
      values += userForm.elements[i].name + "=" + encodeURI(userForm.elements[i].value) + "&"; 
        } 
      } 
     } 
      values = values.substring(0, values.length - 1); 
      jQuery.post(     
       "http://'.$_SERVER['SERVER_NAME']. 
        $uri.strstr($uri,'?')?'&':'?').'autosave=1&format=raw", 
     values, 
     function (submissionId){ 
      if (parseInt(submissionId) > 0){ 
       jQuery("#continue").val(parseInt(submissionId)); 
      } 
         cd = cdLength; 
      timer = window.setInterval("counter()", 1000); 
        } 
       ); 
      }; 
     }; 

    var userForm = document.getElementById("userForm"); 
     var emregex = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     cdLength = '.self::SAVEINTERVAL.'; 

    var left = \'Automatically saving in \'; 
    var cd = cdLength; 
    var right = \' seconds or \'; 
    var button = \'<a onclick="javascript: formAutosave();"><span><b></b>Save Now</span></a>\'; 

     jQuery("#applicant-email").val(jQuery("#'.$fieldId.'").val()); 
    var timer = window.setInterval("counter()", 1000); 

';

我們已經記錄了3個測試視頻(Chrome,Firefox,IE9),儘管用戶沒有使用展開/摺疊或日期選擇器,但在表單中使用下拉列表的所有內容都有可見的減速。所以我期待我們在自動保存程序中導致鎖定或內存泄漏。

重構的建議將不勝感激。

+6

每當你將一個字符串傳遞給'setInterval()'時,上帝就會殺死一隻小貓。 –

+0

任何原因這是一半的核心 - JavaScript和半 -​​ jQuery? –

+0

您可以從減少DOM查找開始。如果頁面加載後表單上的元素數量爲靜態,則添加一個「var formElements = userForm.elements;」就在前面,並用它來代替循環。 – Malk

回答