如何从JavaScript中的连续函数返回布尔值？

Question

I want to learn, how can I return boolean value from consecutive functions in Javascript? I want to run the next function, if previous function returns true. For example there is a main function and there is 3 sub functions.

It will be like this: run the first function if it returns true, run the second one and if the second returns true, run the third function if the third function returns true, then the main function also returns true.

Can someone show me a simple example for that. I wrote an example but it always returns false :) I want to learn the logical best way for that. Thanks all from now :)

My example:

var uname;

$("#username").keyup(function() {

    uname = checkUsername();
    console.log(checkUsername());

});     // Username keyup


function allowedChars() {

    var username = document.getElementById("username").value;

    var chars = /^[a-zA-Z0-9\.\_]*$/;

    if(chars.test(username) == true) {

        $("#notName").html("").show();

        return true;

    }

    else {

        $("#notName").html("Username can just contain A-Z, 0-9, dot and underscore!").show();

        return false;

    }

}   //  allowedChars

function unameLen() {

    var username = document.getElementById("username").value;

    if ((username.length > 3) && (username.length < 20)) {

        $("#notName").html("").show();

        return true;

    }

    else {

        $("#notName").html("Username must be between 3 and 20 characters!").show();

        return false;

    }

}

function unameAvl() {

    var username = document.getElementById("username").value;

    $.post("check.php", { username: username },
    function(result){

        if (result == true) {

            $("#notName").html("").show();

            return true;

        }

        else {

            $("#notName").html("Username is already exists!").show();

            return false;

        }

    });

}

function checkUsername() {

    allowedChars();

    if (allowedChars()) {

        unameLen();

    }

    if (unameLen()) {

        unameAvl();

    }

    if (unameAvl()) {

        return true

    }

    else {

        return false;

    }

}

Answer 1

You can use the && operator to do this for you, because it implements short-circuit boolean logic.

Change your checkUserName method to this and see how it works:

function checkUsername() {
    return allowedChars() && unameLen() && unameAvl();
}

In this case, when allowedChars returns true, it will next call unameLen . If unameLen returns true, it will call unameAvl . The checkUsername function will return false if any of the functions return false, or true if they all return true.

This will also fix the return value of unameAvl , so that it returns a boolean value, not undefined.

function unameAvl() {
    var success = false;
    var username = document.getElementById("username").value;

    $.post("check.php", { username: username },
        function() {
            $("#notName").html("").show();

            success = true;
        }
    }).fail(function() {
        $("#notName").html("Username is already exists!").show();

        success = false;
    });

    return success;
}

jQuery's $.post does not expect a return value from the callback on success, so that return value is discarded. The return value of unameAvl must be set from the function, so it must communicate that status through a variable ( success ).

The arguments to the callback function are also incorrect. jQuery documents the signature of the callback function as Function(PlainObject data, String textStatus, jqXHR jqXHR) , however the actual function used had an incorrect signature of Function(boolean result) . The function arguments won't be used within the callback function, so the argument list can (and is) safely omitted.

The callback is only called on success, so a fail callback also needs to be provided. This is done via the $.fail method that's chained to the $.post call.

See these documentation pages:

• jQuery $.post
• jQuery jqXHR object (for fail callback)
• jQuery $.ajax

All of these changes together make the Ajax call work and report success status correctly as the return value of unameAvl . This correctly allows the short-circuit logic to work as expected.