大型表单或javascript锁定浏览器
large form or javascript locks up browser
我有一个html表单,大约有105个字段,其中包括一些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 = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[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),在所有这些视频中,尽管用户没有使用展开/折叠或日期选择器,但使用表单中的下拉菜单会明显减慢速度。所以我预计我们在自动保存例程中会导致锁定或内存泄漏。
如有重构建议,不胜感激。
上面的评论很棒,我建议遵循@Adam和@Alex发布的建议(传递一个命名函数)。此外,您可能会尝试以不同的方式实现(即模块设计模式或其他一些最佳实践)。看看这个StackOverflow问题:https://stackoverflow.com/questions/4840420/recommended-javascript-annotated-source-code-for-learning
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 如何在Javascript执行后防止浏览器锁定
- Web 工作线程中的同步 XHR 请求是否仍会锁定浏览器
- 在循环锁定浏览器时暂停执行(用fiddles更新)
- 如何执行“;“同步”;javascript调用服务器而不锁定浏览器
- Jquery:Ajax 请求看起来是同步的,锁定浏览器
- 加载外部脚本时锁定浏览器
- JavaScript锁定功能,以防止递归(浏览器冻结/性能)
- 异步ajax请求锁定浏览器
- 在(同步)Ajax期间停止浏览器锁定
- 同步Ajax请求”;锁定“;浏览器
- jQuery正在锁定浏览器
- 大型表单或javascript锁定浏览器
- 在打开选项卡期间通过Jquery锁定浏览器当前选项卡URL栏
- 防止递归函数锁定浏览器
- 在不锁定浏览器的情况下,将大数据JSON从REST请求反序列化为对象
- 使用jquery $.Ajax使用arbor.js导致浏览器锁定,但是'native'JSON并# 39
- 用户界面-防止JavaScript在大循环时锁定浏览器