在商城類項目的時候,有很多待支付的訂單,有時候在訂單列表頁面會分別顯示倒計時,就是頁面會有很多倒計時的訂單。
處理方法:
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>