摘要：在微信公眾號開發(fā)過程中要實現(xiàn)倒計時的一個功能。原因是解決方案訂單生成的時候我們記錄下這個時間為，時間間隔為分鐘內(nèi)需要付款，為，為現(xiàn)在的時間。那么倒計時時間，代碼如下支付超時訂單已提交，請在分秒內(nèi)完成支付

在微信公眾號開發(fā)過程中要實現(xiàn)倒計時的一個功能。效果如下：

開始的思路沒有考慮頁面在后臺運(yùn)行以及鎖屏等情況。代碼如下：

let interval = setInterval(() => {
            let {staticTime} = this.state;
            staticTime = staticTime - 1;
            if (staticTime <= 0) {
                clearInterval(interval);
                this.setState({
                    tip:"支付超時",
                    staticTime:0
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = "訂單已提交，請在"+minutes+"分"+Seconds+"秒內(nèi)完成支付";
            this.setState({
                tip:tip,
                staticTime:staticTime 
            });
        }, 1000);
后來測試發(fā)現(xiàn)鎖屏或者把頁面留在后臺，計算就不對，于是把代碼進(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:"支付超時",
                    staticTime:0,
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = "訂單已提交，請在"+minutes+"分"+Seconds+"秒內(nèi)完成支付";
            this.setState({
                tip:tip,
                staticTime:staticTime,
            });
        }, 1000);
        this.listenPageShowHideHandle();
    
     //計算頁面在后臺的時間

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("時間差：", 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.

**解決方案：**
訂單生成的時候我們記錄下這個時間為A， 時間間隔為B（3分鐘內(nèi)需要付款，B為3*60*1000），C為現(xiàn)在的時間。我們使用setInterval 每個1秒讀取一下時間。那么倒計時時間 == 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:"支付超時",
                isFalse:true
            });
            return;
        }
        let minutes = parseInt(sub/60);
        let Seconds = sub%60;
        let tip = "訂單已提交，請在"+minutes+"分"+Seconds+"秒內(nèi)完成支付";
        console.log(tip);
        this.setState({
            tip:tip,
            isFalse:false
        });
    },1000);