WeChat official account, counting down

Time:2020-10-22

In the development of WeChat official account, we need to implement countdown function. The results are as follows:

WeChat official account, counting down

The initial idea did not consider 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: 'payment timeout',
                    staticTime:0
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            Let tip: 'the order has been submitted, please complete the payment in' + minutes +'minutes' + seconds +'seconds';
            this.setState({
                tip:tip,
                staticTime:staticTime 
            });
        }, 1000);
Later, the test found that locking the screen or leaving the page in the background, the calculation was wrong, so the code was modified as follows.



  let interval = setInterval(() => {
            let {backGroundTime, staticTime} = this.state;
            this.setState({
                backGroundTime:0
            });
            staticTime = staticTime - backGroundTime - 1; 
            if (staticTime <= 0) {
                clearInterval(interval);
                this.setState({
                    Tip: 'payment timeout',
                    staticTime:0,
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            Let tip: 'the order has been submitted, please complete the payment in' + minutes +'minutes' + seconds +'seconds';
            this.setState({
                tip:tip,
                staticTime:staticTime,
            });
        }, 1000);
        this.listenPageShowHideHandle();
    
     //Calculate the time the page is in the background

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 (time difference: ', backgroundtime);
    }
    console.log( document.visibilityState );
});

}

After the transformation, the first problems still exist. as a result of:
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.

**Solution:**
When the order is generated, we record that the time is a, the time interval is B (payment is required within 3 minutes, B is 3 * 60 * 1000), and C is the current time. We use setinterval to read the time every 1 second. Then the countdown time = = a + B-C, the code is as follows

 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: 'payment timeout',
                isFalse:true
            });
            return;
        }
        let minutes = parseInt(sub/60);
        let Seconds = sub%60;
        Let tip: 'the order has been submitted, please complete the payment in' + minutes +'minutes' + seconds +'seconds';
        console.log(tip);
        this.setState({
            tip:tip,
            isFalse:false
        });
    },1000);