以下是我自己寫的一個(gè)程式碼，功能是在微信公眾號(hào)開發(fā)過(guò)程中實(shí)現(xiàn)倒數(shù)計(jì)時(shí)的。效果如下，訂單已提交，請(qǐng)?jiān)?分57秒內(nèi)完成付款。純程式碼解析。

開始的想法並沒有考慮頁(yè)面在背景運(yùn)作以及鎖定畫面等情況。程式碼如下：

let interval = setInterval(() => {
            let {staticTime} = this.state;
            staticTime = staticTime - 1;
            if (staticTime <= 0) {
                clearInterval(interval);
                this.setState({
                    tip:&#39;支付超時(shí)&#39;,
                    staticTime:0
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = &#39;訂單已提交，請(qǐng)?jiān)?amp;#39;+minutes+&#39;分&#39;+Seconds+&#39;秒內(nèi)完成支付&#39;;
            this.setState({
                tip:tip,
                staticTime:staticTime 
            });
        }, 1000);
后來(lái)測(cè)試發(fā)現(xiàn)鎖屏或者把頁(yè)面留在后臺(tái)，計(jì)算就不對(duì)，于是把代碼進(jìn)行了如下改造。



  let interval = setInterval(() => {
            let {backGroundTime, staticTime} = this.state;
            this.setState({
                backGroundTime:0
            });
            staticTime = staticTime - backGroundTime - 1; 
            if (staticTime <= 0) {
                clearInterval(interval);
                this.setState({
                    tip:&#39;支付超時(shí)&#39;,
                    staticTime:0,
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = &#39;訂單已提交，請(qǐng)?jiān)?amp;#39;+minutes+&#39;分&#39;+Seconds+&#39;秒內(nèi)完成支付&#39;;
            this.setState({
                tip:tip,
                staticTime:staticTime,
            });
        }, 1000);
        this.listenPageShowHideHandle();
    
     //計(jì)算頁(yè)面在后臺(tái)的時(shí)間

listenPageShowHideHandle = () =>{

let {backGroundTime} = this.state;
let start, end;
let self = this;
document.addEventListener("visibilitychange", function() {
    if(document.visibilityState == 'hidden'){
        start = new Date().getTime();
    }else if(document.visibilityState == 'visible'){
        end = new Date().getTime();
        backGroundTime = Math.floor((end - start)/1000);
        self.setState({backGroundTime});
        console.log('時(shí)間差：', backGroundTime);
    }
    console.log( document.visibilityState );
});

}

改造之后發(fā)先問題依然存在。原因是：
You cannot continue to run javascript while the iPhone is sleeping using setTimeout(), however.When the phone is put to sleep, Safari will kill any running javascript processes using setTimeout(). Check out this answer here for some reasons why this is done.

**解決方案：**
訂單生成的時(shí)候我們記錄下這個(gè)時(shí)間為A， 時(shí)間間隔為B（3分鐘內(nèi)需要付款，B為3*60*1000），C為現(xiàn)在的時(shí)間。我們使用setInterval 每個(gè)1秒讀取一下時(shí)間。那么倒計(jì)時(shí)時(shí)間 == A+B-C，代碼如下

 let interval = setInterval(()=>{
        let {orderTime, staticTime} = this.state;
        let nowTime = Date.now();
        let sub = Math.floor((orderTime + staticTime - nowTime)/1000);
        console.log('sub',sub);
        if(sub<=0){
            clearInterval(interval);
            this.setState({
                tip:&#39;支付超時(shí)&#39;,
                isFalse:true
            });
            return;
        }
        let minutes = parseInt(sub/60);
        let Seconds = sub%60;
        let tip = &#39;訂單已提交，請(qǐng)?jiān)?amp;#39;+minutes+&#39;分&#39;+Seconds+&#39;秒內(nèi)完成支付&#39;;
        console.log(tip);
        this.setState({
            tip:tip,
            isFalse:false
        });
    },1000);

apache php mysql

相關(guān)文章：

微信公眾號(hào)授權(quán)設(shè)置，微信公眾授權(quán)

微信公眾號(hào)點(diǎn)擊選單即可開啟並登入微站的實(shí)作方法

#相關(guān)影片：

傳智、黑馬微信公眾平臺(tái)開發(fā)影片教學(xué)

以上是微信公眾號(hào)開發(fā)，實(shí)現(xiàn)倒數(shù)計(jì)時(shí)的一個(gè)功能（純程式碼）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！