web前端处理订单待支付倒计时计算显示问题

在商城类项目的时候,有很多待支付的订单,有时候在订单列表页面会分别显示倒计时,就是页面会有很多倒计时的订单。

处理方法:

1.调用后端接口拿到所有的订单,获取所有的倒计时订单,获取到期时间(尽量时间戳,不行就自己转换)。

2.渲染列表的时候把未支付的订单加上计数器dom,然后把到期时间戳写在dom属性里面。

3.在计时器里面轮询 计时器dom,获取到期时间戳减去当前时间,然后计算出要显示的时间,从新修改计数器dom。

4.如果到期了就改变订单状态,如果这个时候如果dom过多处理起来或许会有延迟,但是也就差一丢丢,后端也会做超时取消的,前后端都做。

5.如果后端不做的话,就是前端拿到超时订单,先修改dom,然后在用这个订单号调接口让后端修改这个订单状态。

(后端有时候不会这样给,有时候是给你下单时间,然后自定义个倒计时15分钟,或者半小时,到期调接口改状态,这个时候就得自己计算出来到期时间戳了)

附上自己写的倒计时计时器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="order-daojishi-time"></div>
</body>
<script>
function timeStamp(second_time){  
    if(second_time<=0){
        return;
    }
    var time = '<div><p><span>00</span>天</p><p><span>00</span>时<span>00</span>分<span>'+parseInt(second_time)+'</span>秒</p></div>';  
    if( parseInt(second_time )> 60){  
        var second = parseInt(second_time) % 60;  
        var min = parseInt(second_time / 60);  
        time = '<div><p><span>00</span>天</p><p><span>00</span>时<span>'+min+'</span>分<span>'+second+'</span>秒</p></div>';   
        if( min > 60 ){  
            min = parseInt(second_time / 60) % 60;  
            var hour = parseInt( parseInt(second_time / 60) /60 );  
            time = '<div><p><span>00</span>天</p><p><span>'+hour+'</span>时<span>'+min +'</span>分<span>'+second +'</span>秒</p></div>';  
            if( hour > 24 ){  
                hour = parseInt( parseInt(second_time / 60) /60 ) % 24;  
                var day = parseInt( parseInt( parseInt(second_time / 60) /60 ) / 24 );  
                time = '<div><p><span>'+day+'</span>天</p><p><span>'+hour+'</span>时<span>'+min +'</span>分<span>'+second +'</span>秒</p></div>';                               
            }  
        }  
    }  
    return time;          
}  
setInterval(function(){
    var expireTime = 1554089218000;//订单过期时候的时间戳,或者是一个其它时间,这里灵活处理
    var houtime = Number(expireTime-Date.parse(new Date()))/1000;//
    console.log(Date.parse(new Date()))
    document.getElementById('order-daojishi-time').innerHTML = timeStamp(houtime);
},1000)

</script>

</html>

 

posted @ 2019-04-01 11:15  小兔额乖乖  阅读(2878)  评论(0编辑  收藏  举报