关于javascript异步编程的理解

时间 2019-12-05

原文原文链接

　　在开发手机app的时候，要使用ajax想向后台发送数据。而后遇到了一个bug，经过这个bug，理解了ajax异步请求的工做原理。下面是登陆页面的源代码。javascript

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" src="js/whw.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.md5.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/base.css" />
    </head>
    <body>
        <header class="mui-bar mui-bar-nav" id="header">
            <a class="mui-action-back mui-icon mui-icon mui-icon-arrowthinleft mui-pull-left"></a>
            <h1 style="width:86%" class="mui-title text-left"><span>|</span>登陆<b>忘记密码</b></h1>
        </header>
        <div class="mui-content login" id="login">
            <div>
                <img src="img/default.png" />
            </div>
            <h3 class="h3">美团帐户登陆</h3>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <label for="">手机号码</label>
                    <input type="text" id="tbPhone" />
                </li>
                <li class="mui-table-view-cell">
                    <label for="">密码</label>
                    <input type="password" id="tbPwd" />
                </li>
            </ul>
            <button class="button" id="btnLogin">登陆</button>
            <div class="register">
                <a href="javscript:;">当即注册</a>
                <a class="phone_login" href="javscript:;">手机号码快捷登陆></a>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        mui.init();
        mui.plusReady(function() {
            document.getElementById("btnLogin").addEventListener('tap', function() {
                var phone = document.getElementById("tbPhone").value.trim();
                var pwd = document.getElementById("tbPwd").value.trim();
                var loginFlag = loginCheck(phone.pwd);
                if(loginFlag)
                {
                    alert('3      登录成功');
                    localStorage.setItem('phone', phone);
                    plus.webview.currentWebview().close();
                    var homeWebview = plus.webview.getWebviewById('home.html');
                    homeWebview.evalJS('showUserInfo();');
                    mui.openWindow('home.html', 'home.html', { top: '0px', bottom: '51px' }, {}, false, {});
                }else {
                    alert('尬，输入有误!登陆失败。。。');
                }
            });    
        });
        
        function loginCheck(phone,pwd)
        {
            var loginFlag = false;
            $.ajax({    
                url:globalUrl+'UserServlet',// 跳转到 action    
                data:
                {
                    'action': 'loginHandin',
                    'id': phone,
                    'pwd': pwd
                },    
                type:'post',    
                cache:false,    
                dataType:'json',    
                success:function(data) 
                {
                    alert('1       ' + data.success);
                    loginFlag = data.success;
                },    
                 error : function() 
                 {
                      // view("异常！");    
                      alert("本机网络异常!");    
                 }    
            }); 
            alert('2          ' + loginFlag);
        }
    </script>
</html>

　　一开始，个人理解是这样的。我认为是点击登陆按钮的时候，调用loginCheck方法，而后ajax向后台发送数据，数据接收成功后，执行success方法，弹出1，而后，程序顺序执行，弹出2，而后回到调用函数，再弹出3.我以为顺序是123，可是实际测试结果显示的确是213，为何？由于我是按照同步的思路去理解ajax的，事实上，这是错误的。ajax是异步的请求，css

　　这就是为何会出现先弹出2，后弹出1，最后弹出3。html

1. Javascript关于异步编程的发展
2. 你好，JavaScript异步编程---- 理解JavaScript异步的美妙
3. JavaScript异步编程原理
4. javascript异步编程详解
5. javascript异步编程讲解
6. Javascript异步编程详解
7. 理解JavaScript异步编程【译】
8. 异步编程的理解
9. JavaScript异步编程
10. javascript异步编程
更多相关文章...
• C# 异常处理 - C#教程
• PHP 异常处理 - PHP教程
• ☆基于Java Instrument的Agent实现
• NewSQL-TiDB相关