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