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>