记录一次错误：JavaScript 回调函数中的 return false 问题

项目中js文件中的一个功能函数：

// 注册邮箱校验
function validateEmail() {
    var id = "email";

    //获取输入文本框内容
    var value = $("#"+id).val();
    //1.非空校验
    if(!value){
        //先获取对应的label，再添加错误信息，最后显示label并返回一个false
        $("#"+id+"Error").text("Email不能为空!");
        showError($("#"+id+"Error"));
        return false;
    }
    //2.Email格式校验
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)){
        //先获取对应的label，再添加错误信息，最后显示label并返回一个false
        $("#"+id +"Error").text("错误的Email格式！");
        showError($("#"+id +"Error"));
        return false;
    }

    // 3.是否注册校验(略)
	$.ajax({
	    url:"/ajaxValidateEmail.do",  //要请求的控制器方法
	    data:{email:value},  //给服务器的参数
	    type:"post",
	    dataType:"json",
	    cache:false,//不让浏览器缓存数据
	    success:function(resp) {
	        if(!resp) {  //如果校验失败
	            $("#"+id+"Error").text("Email已被注册！");
	            showError($("#"+id+"Error"));
	            return false;
	        }
	    }
	});
   
    return true;

遇到错误模块：

 $.ajax({
        url:"/ajaxValidateEmail.do",  //要请求的控制器方法
        data:{email:value},  //给服务器的参数
        type:"post",
        dataType:"json",
        cache:false,//不让浏览器缓存数据
        success:function(resp) {
            if(!resp) {  //如果校验失败
                $("#"+id+"Error").text("Email已被注册！");
                showError($("#"+id+"Error"));
                return false;
            }
        }
    });

    return false;

问题：

就是希望在 Ajax 方法中，请求成功后（success）的回调函数中根据响应的值来判断程序是否继续执行。
不解的是在回调函数中已经 return false 了，但是 Ajax 方法外部的后续return false语句却仍然继续执行。
即校验失败的时候，希望程序终止执行。但是程序却仍然向下执行，使函数返回值为false。

原因：

首先，这里 Ajax 方法默认是异步请求（async:true），我们必须设置为同步请求(async:false)，这样才会等待当ajax 执行完毕之后，才会继续执行其他代码。
因为我没有理解在 return false 时发生了什么。当调用 return false时，实际上有三个处理过程：

1. event.preventDefault(); —— 阻止浏览器默认的行为
2. event.stopPropagation(); —— 停止事件冒泡
3. 停止回调函数执行并立即返回

所以，在以上代码的回调函数部分中执行了 return false，就表示停止回调函数的执行并立即返回，不再履行函数内的代码，但函数外的代码仍然会执行。
因此，程序在 Ajax 方法外的后续语句可以继续执行，不会影响。

解决方法：

所以，我们如果想要达到在校验失败的情况下，终止程序执行的效果， 可以在全局范围内声明一个变量，并且在 Ajax 方法中给该变量重新赋值， 然后在Ajax方法外的后续语句中判断该全局变量的值。

修改后代码如下：

// 注册邮箱校验
function validateEmail() {
    var id = "email";

    var flag = 1;

    //获取输入文本框内容
    var value = $("#"+id).val();
    //1.非空校验
    if(!value){
        //先获取对应的label，再添加错误信息，最后显示label并返回一个false
        $("#"+id+"Error").text("Email不能为空!");
        showError($("#"+id+"Error"));
        return false;
    }
    //2.Email格式校验
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)){
        //先获取对应的label，再添加错误信息，最后显示label并返回一个false
        $("#"+id +"Error").text("错误的Email格式！");
        showError($("#"+id +"Error"));
        return false;
    }

    // 3.是否注册校验
    $.ajax({
        url:"/ajaxValidateEmail.do",  //要请求的控制器方法
        data:{email:value},  //给服务器的参数
        type:"post",
        dataType:"json",
        cache:false,//不让浏览器缓存数据
        async:false,//设为同步请求
        success:function(resp) {
            if(!resp) {  //如果校验失败
                $("#"+id+"Error").text("Email已被注册！");
                showError($("#"+id+"Error"));
                flag = 0;
            }
        }
    });

    // 判断执行Ajax请求之后，是返回true还是false
    if(!flag){
        return false;
    }

    return true;

注意：

在这里需要把 Ajax 方法的 async 设为 false，即同步请求，此时 Ajax方法的行为就像一个普通函数，浏览器会一直等待请求完成，然后才会执行脚本的后续语句。

ajax 同步和异步区别？

我们在使用 ajax 一般都会使用异步处理。

• 异步处理：就是我们通过事件触发 ajax，请求服务器，在这个期间，无论服务器有没有响应，客户端的其他代码一样可以运行。

• 同步处理：就是我们通过事件触发 ajax，请求服务器，在这个期间，须要等待服务器处理请求，客户端不能做任何处理。只有当 ajax 执行完毕后，才会继续执行其他代码。

• 同步：提交请求 -> 服务器处理（处理期间，同步须要等待返回结果，才能继续执行后续的代码，这个期间客户端浏览器不能干任何事） -> 处理完毕返回

• 异步：提交请求 -> 服务器处理（处理期间，异步不必等待返回结果，就可以执行后续的代码，这个期间客户端浏览器可以做其他事情） -> 处理完毕返回，一般需要监听异步的结果

同步是在一条直线上的队列，异步不在一个队列上 各走各的

jquery 的 async:false,这个属性默认是true：异步，false：同步。举例：

• 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
• 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。