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

背景:业务部门提出了一个需求,想要在某个手机端页面加入倒计时,提醒用户处理事项,于是我快速开发了一个倒计时的功能, 提测,测试完毕后就提出了问题:修改了手机系统时间,倒计时功能异常。原因是我在代码中使用了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;
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值