话说:
各位读者盆友,中午好!这个Bug之所以专门用一篇博客来讲解,表明这个Bug是费了俺老孙一点时间的,而且之前从来没有遇到过,而且这个bug还是蛮特别的。
目录:
1.Bug内容
2.总结
1.Bug内容
Uncaught RangeError: Maximum call stack size exceeded
网上答案说:递归调用,导致内存溢出,前端导致内存溢出,还是有点意思的呢!
毫无疑问,是Ajax代码中递归调用了,但是究竟是哪里递归调用了呢?根本看不出来啊。Ajax代码如下:
//用户名blur()验证
$("#userName").blur(function() {
var userNameInfo = $("#userNameInfo");
if($(this).val().trim() == "") {
userNameInfo.html("请输入用户名");
}else{
userNameInfo.html("");
//Ajax验证
$.ajax({
url:"checkLoginByUserName",type:"get",dataType:"json",async:true,data:{"userName":userName},success:function(data) {
alert("请求后台成功!"+data);
},error:function() {
alert("遗憾,请求后台失败");
}
});
}
});
问题在这里:userName和data传过去的userName一样。
问题在于:data传过去的userName和blur()事件的userName是同一个userName,都是全局变量。这样意味着:只要userName有内容,一旦发生blur()就去调用Servlet,然后又把自己作为值传进去,然后就发生了递归!一定要注意你这个data:{“”,userName}中传过去的名字和blur()事件的名字要不一致,或者说一个是全局,一个是局部,颜色会有微妙变化。
注意颜色区别:
最终这么写,妥妥的
//一进来 userName就应该聚焦
$(function() {
// $("#userName").focus();
//用户名blur()验证
$("#userName").blur(function() {
var userName2 = $(this).val().trim();
var userNameInfo = $("#userNameInfo");
if($(this).val().trim() == "") {
userNameInfo.html("请输入用户名");
}else{
userNameInfo.html("");
//Ajax验证
$.ajax({
url:"checkMemberName",data:{"userName":userName2},//一定要注意这个userName2不要和$("#userName").blur()冲突,否则递归调用!!还不以发现
success:function(data) {
//alert("请求后台成功!"+data);
if(data != "") {
$("#userNameInfo").html("√");
$("#userNameInfo").css({"font-size":"25px","color":"green","font-weight":"bolder"});
}else{
$("#userNameInfo").html("×");
$("#userNameInfo").css({"font-size":"30px","color":"red","font-weight":"bolder"});
}
},error:function() {
alert("遗憾,请求后台失败");
}
});
}
});
2.总结
遇到Bug的时候,不要一开始就排除一些原因,也许最开始排除的就是最可能的,另外要大胆尝试,综合网上各种资料,虽然有的回答不敢恭维,但是多少能给我们提供点灵感。
另外,记住,千万不要因为小小Bug影响了心情,要有百折不挠的精神哈。
“我一定会回来的”!
哈哈,再会!
原文链接:https://www.f2er.com/ajax/160400.html