JavaScript 回调函数中的 return false 问题

今天一个同事问了我一个问题，就是在 Ajax 方法中，请求成功后（success）的回调函数中根据响应的值来判断程序是否继续执行，他不解的是在回调函数中已经 return false 了，但是 Ajax 方法外部的后续语句却仍然继续执行。他的代码类似于：

    $(function(){
        $.ajax({
            async:false,
            type:"post",
            data:{
                "username":"dee"
            },
            url:"ajax.php",
            success:function(data){
                if(data.code != 200){
                      return false;
                }
            }
        });
        console.log("continue");
    });        

即返回值不是 200 的时候，希望程序终止执行。但是程序却仍然向下执行，打印出了 "continue"。

这里他把 Ajax 方法设为同步请求（async:false）是对的，但是他没有理解在 return false 时发生了什么。当调用 return false 时，实际上有三个处理过程：

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

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

 

如果要达到返回值不是 200 的情况下，终止程序执行，可以在全局范围内声明一个变量，并且在 Ajax 方法中给该变量重新赋值，然后在 Ajax方法外的后续语句中判断该全局变量的值，代码如下：

    $(function(){
        var flag = 1;
        $.ajax({
            async:false,
            type:"post",
            data:{
                "username":"dee"
            },
            url:"ajax.php",
            success:function(data){
                if(data.code != 200){
                    flag = 0;
                }
            }
        });
        if(flag == 0){
            return false;
        }
        console.log("continue");
    });

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

 

参考：http://www.jb51.net/article/42711.htm