JavaScript中function 之return false的理解(实例代码)

Posted 2020-10-24 轴轴

1.司空见惯代码,在某一dom节点上注册事件方法

$("#btnResponse").click(Login);
$("#txtCode").keydown(ReturnKey);

2.非常正常的Login function,只是里面用了swal插件

代码执行效果就是我要的,点击btnResponse,当满足触发条件,弹出swal提示框,非常好.

function Login(e) {
    var loginUserId = $("#txtUserno").val(); //用户名
    var passWord = $("#txtPassword").val();  //密码
    var pCode = $("#txtCode").val();  //图形验证码
    //验证必填项
    if (loginUserId === null || loginUserId.trim() === "") {
        swal({
            title: "失败",
            text: "账号不能为空",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定",
            closeOnConfirm: false
        });
        return false;
    }
    //略...

3.没达到预期效果的ReturnKey方法设计,弹出swal提示框立刻刷掉,看了下Login和ReturnKey的区别,无非ReturnKey又套了一层,再调用Login方法

function ReturnKey(event) {
    if (event.keyCode == 13) {
       Login();
    }
}

说明:分析上面的代码,ReturnKey在执行完成Login之后, ReturnKey所在的执行线程有继续执行,所以swal被刷掉了.

4.改动代码,达到预期效果, 回车之后,swal弹出框停留在页面.

function ReturnKey(event) {
    if (event.keyCode == 13) {
       return Login();//Login(); return false;
    }
}