artDialog中的time参数,ajax请求中的异步与同步

一artDialog中的time参数,是用来表示几秒钟之后关闭对话框。

但是在用的时候发现一个问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://s.hqbcdn.com/favicon/favicon.ico" />
<title>artdialog中的time属性</title>
<meta name='keywords' content=""/>
<meta name='description' content=""/>
<meta name="viewport" content="width=device-width,maximum-scale=2.0, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="artDialog/dialog.css" />
<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="artDialog/artDialog.js"></script>
</head> <body> <input type="button" value="click me" id="test_button" /> <script type="text/javascript"> $(function(){ $('#test_button').click( function(){ art.dialog({ id : "", title : '', content : '我将在3秒后消失,消失后继续执行程序', width : 300, height : 200, margin : 0, padding : 0, time : 2 }) }); art.dialog({ id : "", title : '', content : '我是继续执行的程序', width : 300, height : 200, margin : 0, padding : 0, time : 2 }) }) </script> </body> </html>

在弹出对话框之后,程序不能继续执行。

在解决办法就是将后续的程序放在close() 函数中执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://s.hqbcdn.com/favicon/favicon.ico" />
<title>artdialog中的time属性</title>
<meta name='keywords' content=""/>
<meta name='description' content=""/>
<meta name="viewport" content="width=device-width,maximum-scale=2.0, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="artDialog/dialog.css" />
<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="artDialog/artDialog.js"></script>
</head>
<body>
<input type="button" value="click me" id="test_button" /> 
<script type="text/javascript">
$(function(){
    $('#test_button').click(
        function(){
            art.dialog({
                id : "",
                title : '',
                content : '我将在3秒后消失,消失后继续执行程序',
                width : 300,
                height : 200,
                margin : 0,
                padding : 0,
                time : 2,
               close: function(){
                   art.dialog({
                      id : "",
                title : '',
                content : '我是继续执行的程序',
                width : 300,
                height : 200,
                margin : 0,
                padding : 0,
            })    
              }    
            })    
    });   
})
</script>
</body>
</html>                        

问题得到解决

二,ajax中的请求有异步和同步之分。

ajax中的请求有异步和同步之分,在默认的请求中async默认为true,如果要设置为同步请求,修改为false。

在工作中,做一个预约抢购活动。业务逻辑是,在预约阶段,如何用户已预约,将展示预约码,不展示“立即预约”按钮。

但是问题是,在后面的程序中 预约码变量 order_num 总是为null。

经过调试,发现是因为获取预约码的ajax请求是异步方式,后续代码是执行时接口并未获得预约码的值,因此,一直报错。

代码片段:

   /*查询预约码*/
    $.ajax({
        url : "http://www.okhqb.com/item/getMemberBookingCode.json?eventId=581",
        type : "GET",
        dataType : 'jsonp',
        jsonp : 'callback',
        success : function (result) {
            if( result.code == 200 ){
                    order_num = result.data;
                    
            }
        }
    });

    /*预约中*/
    if( order_end > currentime  ){    
         initOrder();
    }else if(  currentime > order_end && kq_time > currentime ){
         initWait();/*等待开抢*/
    }else if(  currentime > kq_time && act_end > currentime ){
         initQiang();/*抢购开始*/
    }else if(currentime > act_end) {
          initEnd();/*抢购活动结束*/
    }

    /*初始化预约状态*/
    function initOrder(){
        /*处理状态*/        
        $('#process_line').addClass('process_line1');
        $('#node1').addClass('node1_ok');
        $('#node2').addClass('node2_no');
        $('#node3').addClass('node3_no');
        $('.note_text1').addClass('curr');
        if( !order_num){
                      $('#btn_state').removeClass().addClass('order_btn');
                 }else{
            var _html = '<p class="order_num">您的预约码是:<span id="order_num">'+ order_num +'</span></p>';
           $('.login_hm').before(_html);
                }

        cc = setInterval(_countLeave, 1000);
    }


解决方法是:将异步修改成同步,但是因为是跨域请求,数据格式是jsonp。不能同步。有一个好方法,将业务逻辑放在请求成功中执行

/*查询预约码*/
    $.ajax({
        url : "http://www.okhqb.com/item/getMemberBookingCode.json?eventId=581",
        type : "GET",
        dataType : 'jsonp',
        jsonp : 'callback',
        success : function (result) {
            if( result.code == 200 ){
                    order_num = result.data;
                    
            }
            /*预约中*/
            if( order_end > currentime  ){    
                initOrder();
            }else if(  currentime > order_end && kq_time > currentime ){
                initWait();/*等待开抢*/
            }else if(  currentime > kq_time && act_end > currentime ){
                initQiang();/*抢购开始*/
            }else if(currentime > act_end) {
                initEnd();/*抢购活动结束*/
            }
        }
    });

这样,不管请求有多慢,都不会取不到值,而出错。

原文地址:https://www.cnblogs.com/huanhuan8808/p/3633923.html