zoukankan html css js c++ java

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();/*抢购活动结束*/
            }
        }
    });

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

查看全文

相关阅读:
E. Arranging The Sheep
B. Box Fitting
E. Permutation by Sum
D. Corrupted Array
联通 F677V2 光猫改桥接
 IntelliJ IDEA 常用快捷键整理
 Git 常用命令速查表
 Git 入门操作指南
 Anaconda 常用命令总结
 VS code 快捷键整理

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