bug-4-Ajax内存溢出(递归调用)?

前端之家收集整理的这篇文章主要介绍了bug-4-Ajax内存溢出(递归调用)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

话说:

各位读者盆友,中午好!这个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

猜你在找的Ajax相关文章