The following is a code I wrote myself. The function is to implement countdown during the development process of WeChat public account. The effect is as follows, the order has been submitted, please complete the payment within 2 minutes and 57 seconds. Pure code analysis.

#The initial idea did not consider the situation of the page running in the background and locking the screen. The code is as follows:

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;訂單已提交，請?jiān)?amp;#39;+minutes+&#39;分&#39;+Seconds+&#39;秒內(nèi)完成支付&#39;;
            this.setState({
                tip:tip,
                staticTime:staticTime 
            });
        }, 1000);
后來測試發(fā)現(xiàn)鎖屏或者把頁面留在后臺，計(jì)算就不對，于是把代碼進(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;訂單已提交，請?jiān)?amp;#39;+minutes+&#39;分&#39;+Seconds+&#39;秒內(nèi)完成支付&#39;;
            this.setState({
                tip:tip,
                staticTime:staticTime,
            });
        }, 1000);
        this.listenPageShowHideHandle();
    
     //計(jì)算頁面在后臺的時(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;訂單已提交，請?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

Related articles:

WeChat public account authorization settings, WeChat public authorization

WeChat public account clicks the menu to open and log in to the microsite implementation method

Related Video:

Chuanzhi and Dark Horse WeChat public platform development video tutorial

The above is the detailed content of WeChat public account development to implement a countdown function (pure code). For more information, please follow other related articles on the PHP Chinese website!