ReactNative页面倒计时的一种实现思路

朱雀 2022-12-25 08:59 107阅读 0赞

**背景：业务部门提出了一个需求，想要在某个手机端页面加入倒计时，提醒用户处理事项，于是我快速开发了一个倒计时的功能， 提测，测试完毕后就提出了问题：修改了手机系统时间，倒计时功能异常。原因是我在代码中使用了new Date() ,导致手机系统时间改变后，该数据也发送了变化。于是又快速修改了一版，采用网络时间。具体做法就是从请求的返回头中拿时间，认为该时间即为正确时间。该页面为某模块的详情页面(可理解为商品详情)，页面初始化时会根据id查询详情信息。具体做法如下：**

**  首先处理网络请求的返回结果，在返回结果中加入请求头中的时间**

httpGetWithTime = (url) => {
            let header = getHeader();
            return new Promise((resolve, reject) => {
                cGetData(url, {
                    method: 'GET',
                    headers: header,
                    // body:{},
                }).then((response) => {
                    if (response.ok) {
                        let { map } = response.headers;
                        // let result =response.json() ;
                        response.json().then(res => {
                            if (map && map.date) {
                                resolve({ ...res, netWorkTime: map.date })
                            } else {
                                resolve({ ...res })
                            }
                        });
                    } else {
                        reject("接口异常");
                    }
                })
                    .catch((error) => {
                        reject(error);
                    })
            })
        }

页面初始化后，记下网络请求结果中的网络时间 netWorkTime ，和此时的时间 currentTime

countDown = () => {
            let lastTime = new Number(dateFormat(this.state.prescription.pushTime))// 接口返回的活动的开始时间
            let crashTime = lastTime + 24 * 60 * 60 * 1000
            // let diffTime='';
            let now = '';
            if (this.state.netWorkTime) {
                now = new Date(this.state.netWorkTime).getTime();
            } else {
                now = new Date().getTime();
            }
            //  currentTime 为进入页面的当前时间  =new Date()  
            let diffTime = crashTime - (now + new Date().getTime() - this.state.currentTime);
    
            if (diffTime <= 0) {
                this.setState({
                    countime: ''
                })
            } else {
                this.setState({
                    countime: this.formatDate(diffTime)
                })
            }
    
            setInterval(() => {
                if (diffTime >= 1000) {
                    diffTime -= 1000;
                    // timeObj.innerHTML = formatDate(diffTime);
                    this.setState({
                        countime: this.formatDate(diffTime)
                    })
                } else {
                    this.setState({
                        countime: ''
                    })
                }
            }, 1000)
        }
        formatDate(maxtime) {
            var d = Math.floor(maxtime / (1000 * 60 * 60 * 24));
            var h = Math.floor(maxtime / (1000 * 3600)) - (d * 24);
            var m = Math.floor(maxtime / (1000 * 60)) - (d * 24 * 60) - (h * 60);
            var s = Math.floor(maxtime / (1000)) - (d * 24 * 60 * 60) - (h * 60 * 60) - (m * 60);
            var hour = (d * 24) + h, minutes = m, seconds = s;
            if (hour > 100) {
                hour = 99
            }
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (m < 10) {
                minutes = "0" + minutes
            } if (s < 10) {
                seconds = "0" + seconds;
            }
            return hour + ":" + minutes + ":" + seconds;
        }