大型表单或javascript会锁定浏览器
我有一个包含大约105个字段的html表单,其中包括一些javascript活动: 1展开/折叠部分 2日期选择器 3自动保存功能大型表单或javascript会锁定浏览器,javascript,jquery,ajax,blocking,Javascript,Jquery,Ajax,Blocking,我有一个包含大约105个字段的html表单,其中包括一些javascript活动: 1展开/折叠部分 2日期选择器 3自动保存功能 <script type="text/javascript"> function counter() { email = document.getElementById("applicant-email").value; if (email.match(emregex) || cd == cdLength){
<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,在所有这些视频中,使用表单中的下拉菜单都会出现明显的速度减慢,即使用户没有使用expand/collapse或date picker。因此,我预计我们会在自动保存例程中导致锁定或内存泄漏
关于重构的建议将不胜感激。上面的评论非常好,我建议按照@Adam和@Alex发布的建议传递一个命名函数。此外,您可以尝试实现一些不同的功能,即模块设计模式或其他一些最佳实践。看看这个StackOverflow问题:每次你向setInterval传递一个字符串,上帝就会杀死一只小猫。这是半核心javascript半jQuery的原因吗?你可以从减少DOM查找开始。如果加载页面后表单上的元素数量是静态的,则添加一个var formElements=userForm.elements;就在前面,用它来循环。@mike我们还在学习,有没有核心jquery间隔处理你可以告诉我的地方?@adam,谢谢你将实现并回到这里