javascript - Why return false in js cannot prevent downward execution

Question

 //再次验证手机号码 格式是否正确
            var reg = /^1[3|5|4|8|7|][0-9]\d{8}$/;
            var r = phone.match(reg);
            if (r == null) {
                layer.open({
                    content: '手机号码格式不正确'
                    ,skin: 'msg'
                    ,time: 3 //2秒后自动关闭
                });
                return false;   //第一个return false是有效的
            }

            //再次验证手机号码是否已经存在
            $.post("__MODULE__/Login/ajaxCheckPhoneIsExist",{phone:phone},function(data,status){


                if(data=="手机号码已被注册"){

                    layer.open({
                        content: '该手机号码已经存在'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });

                    return false;   //第2个return false无效
                }

            });
            
            
            alert("11111");

//The first return false is valid
//The second return false is invalid
What is the reason

Answer 1

The first return false is called synchronously, so the effect can be seen;

The

$.post method is executed asynchronously, so when return false in the callback function of the $.post method, it actually takes effect, but when this code is executed, $.post The external code has been executed long ago, so the effect is not visible. In addition, adding this code to the callback function does not make sense, because even return exits the currently executed function, that is, the callback function of $.post, and cannot prevent the code outside $.post implement.

If there is code that needs to be executed after the $.post request is successful, then put the code in the callback function of the $.post method. For example, if the questioner originally intended that alert('1111') be executed based on conditional judgment after the request is successful, then alert('11111') can be placed in the callback function of the $.post method;

Let me explain synchronous and asynchronous to the subject here. For example, for example, the subject is writing code and feels thirsty, so he goes to boil water to drink. In this process, the subject is equivalent to a thread. Writing code is what the subject is currently executing. When he feels thirsty, he will get some water and put it there to boil. Don't worry about it. The subject will continue to write code. He only needs to wait until the water Once it's cooked, just take it out and drink it yourself. The code of the subject is the same. The js is executed from top to bottom. When the execution reaches $.post, a request is sent. During the request process, the external js continues to execute (it does not wait for the $.post request to return the result). ), wait until the ajax request returns, and then call back the previously defined callback function. Except that $.post is executed asynchronously, the rest of the code is executed synchronously.

In addition, I found that the regular expression of the question can be optimized. I personally think it can be written as /^1[34578]d{9}$/g

Answer 2

Return returns the current function. Your first return is the callback function of a click event, and the second return is the callback function of the ajax request. Naturally, it will not prevent the outer function callback

Answer 3

The function in post is an asynchronous function and will only be called after the request is successful. Before the request returns successfully, the code will continue to be executed. So the return false statement is invalid. The solution is to put return false outside the asynchronous function, not in the asynchronous function of $.post().

Answer 4

$.post is executed asynchronously, you need to use $.ajax and set async: false.

Answer 5

Place it at the same level as alert(1111)