小程序倒计时深究

小程序倒计时重叠抖动问题

因为请求数据写在onShow 函数里面所以每次切换界面都会刷新这就会导致单页面这就会导致如果当前 定时器在跑的话再次刷新会再次常见定时 那么就会导致刷新几次有几个定时器同时在跑那么前端界面显示的计时数字 就会不时跳动所以需要保证在跑的定时器只有一个。将定时器对象创建为全局的在每次开启定时器的时候先清空之前的定时器。就可以解决刷新后计时闪动的问题了或者在在tab页面运用 onHide 周期 进行 clearTimeInterval清空 , 在 非tab页面运用onUload() 周期 进行 clearTimeInterval清空百度都可以找到类似解决方案其中在我的历史文章小程序实战踩坑之B2B商城项目总结也有总结代码类似如下：

/**

   * 清除interval

  */

 clearTimeInterval: function (that) {

    var interval = that.data.interval;

    clearInterval(interval)

  },

 /**

   * 生命周期函数--监听页面卸载

   * 退出本页面时停止计时器

  */

 onUnload:function () {

      var that = this;

      that.clearTimeInterval(that)

 },

 /**

   * 生命周期函数--监听页面隐藏

   * 在后台运行时停止计时器

  */

 onHide:function () {

      var that = this;

      that.clearTimeInterval(that)

 }

倒计时使用setInterval或setTimeout触摸屏幕导致时间显示的突跳突慢问题卡顿甚至停止

不信的同学可以尝试用手指触摸屏幕上下小幅上下移动不放你会发觉时间竟然停止了。（特别是针对低端机型）

通常同学写代码都会如此：

                let self = this;

                let lefttimeSec = time - new Date().getTime();

                let calc = setInterval(function() {

                    lefttimeSec -= 1000;

                    self.endtimestr = '距离拼单结束还有' + self.dateformat(lefttimeSec);

                    self.$apply();

                    if (lefttimeSec <= 0) {

                        clearInterval(calc);

                    }

                }, 1000);

使用setInterval后即使用了上面说的“小程序倒计时重叠抖动问题”解决方案只是解决了倒计时重叠问题这样写法会导致的一些精准度不高。其实很简单解决代码如下：

                showCountTime(time){

                    let self = this;

                    setTimeout(function(){

                        let lefttimeSec = time - new Date().getTime();

                        lefttimeSec -= 1000;

                        self.endtimestr = '距离拼单结束还有' + self.dateformat(lefttimeSec);

                        self.$apply();

                        self.showCountTime(time);

                    },1000);

                }

注意这里用了setTimeout要tab页面运用onHide周期进行clearTimeout清空, 在非tab页面运用onUload()周期 进行clearTimeout清空定时器。这步必须要做就不多说了要不还是会出现上面说的“小程序倒计时重叠抖动问题”问题。

用了上面代码补失的精准度不足。小心的测试同学会发现触摸屏幕导致的突跳突慢问题,甚至停止！于是各种寻思去找了拼多多小程序京东购物小程序各种对比。 结论是拼多多存在和我一样的问题京东购物小程序的倒计时没这样的问题给个赞！

出现问题环境描述：

小程序框架:wepy : "^1.7.2"

标签： 页面问题定时器程序