一個Js方法作用域的問題

wangsen2235068發表於2013-09-03
JS


今天工作中遇到一個BUG.

js方法ajax驗證名字是否存在，存在就不繼續發post請求。

之前錯誤的程式碼：

function isRoleExists() {
        $.ajax({
            url: '@Url.Action("IsRoleExists")',
            type: "GET",
            cache: false,
            data: { "roleName": $("#RoleName").val(), "selfName": "" },
            success: function (data) {
                if (data == "True") {
                    alert('Role had already exists !');
                    $("#RoleName").addClass("input-validation-error");
                    return true;
                }
                else {
                    $("#RoleName").removeClass("input-validation-error");
                    return false;
                }
            }
        });
    }

 //3.validate exists or not
            if (isRoleExists()) {
                return false;
            }
            //4.ajax post, if not exists and form is validate
            addRole();

錯誤原因，在$.ajax方法的success方法中return,影響的是ajax方法是否進行下一步，返回值的作用域是ajax方法。

函式isRoleExists,所以isRoleExists函式始終返回undifined, ajax返回返回true或false不會影響到它。所以語句if (isRoleExists()) {始終為false,走不到return false語句，所以儘管提示名稱已經存在，還是發post請求了。修改後的方法：

function isRoleExists() {
       var _flag = true;
        $.ajax({
            url: '@Url.Action("IsRoleExists")',
            type: "GET",
            cache: false,
            data: { "roleName": $("#RoleName").val(), "selfName": "@Model.RoleName" },
            success: function (data) {
                if (data == "True") {
                    alert('Role had already exists !');
                    $("#RoleName").addClass("input-validation-error");
                }
                else {
                    $("#RoleName").removeClass("input-validation-error");
                    flag= false;
                }
            }
        });
        return _flag;
    }

這樣，當名稱存在時候，最終返回的_flag值為ture時,if (isRoleExists()) {語句為ture,執行return false語句，不會去發post請求。

發現有bug,不重複的也不能提交。原因是ajax scucess執行時間要晚，return語句不等ajax執行完，就執行了。

function isRoleExists() {
        var _isExists = true;
        $.ajax({
            url: '@Url.Action("IsRoleExists")',
            type: "GET",
            cache: false,
            data: { "roleName": $("#RoleName").val(), "selfName": "" },
            success: function (data) {
                if (data == "True") {
                    alert('Role had already exists !');
                    $("#RoleName").addClass("input-validation-error");
                }
                else {
                    $("#RoleName").removeClass("input-validation-error");
                    _isExists = false;
                }
                $("#sp1").html("ajax call time :Second:" + new Date().getSeconds() + " ,Millisecond:" + new Date().getMilliseconds());
            }
        });
        $("#sp2").html("fun call time :Second:" + new Date().getSeconds() + " ,Millisecond" + new Date().getMilliseconds());
        return _isExists;
    }
結果：ajax call time :Second:30 ,Millisecond:642 


fun call time :Second:30 ,Millisecond614 

注意，注意

相關文章