小程序倒计时深究

[复制链接]
查看: 2309|回复: 8
  • 萌哒
    2018-11-19 14:03
  • 发表于 2019-1-23 14:19:09 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

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

    因为请求数据写在onShow 函数里面,所以每次切换界面都会刷新,这就会导致,如果当前 定时器在跑的话,再次刷新会再次常见定时, 那么就会导致刷新几次有几个定时器,同时在跑,那么前端界面显示的计时数字 就会不时跳动,所以需要保证在跑的定时器只有一个。将定时器对象创建为全局的,在每次开启定时器的时候先清空之前的定时器。就可以解决刷新后计时闪动的问题了,或者在在tab页面,运用 onHide 周期 进行 clearTimeInterval清空 , 在 非tab页面,运用onUload() 周期 进行 clearTimeInterval清空,百度都可以找到类似解决方案,其中在我的历史文章小程序实战踩坑之B2B商城项目总结也有总结,代码类似如下:
    /** * 清除interval * @param that */ 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  { // 总秒数 var second = Math.floor(micro_second / 1000); // 天数 var day = Math.floor(second / 3600 / 24); // 小时 var hr = Math.floor(second / 3600 % 24); // 分钟 var min = Math.floor(second / 60 % 60); // 秒 var sec = Math.floor(second % 60); hr = hr < 10 ? '0' + hr : hr; min = min < 10 ? '0' + min : min; sec = sec < 10 ? '0' + sec : sec; if (day > 0) { return day + " 天" + ' ' + hr + ":" + min + ":" + sec; } else { return hr + ":" + min + ":" + sec; } } onLoad() { //api模拟得到time this.showCountTime(1545899950167); } }</span class="hljs-name"style="box-sizing: border-box;"script/span>结论是: 倒计时在触摸(滚动)情况下正常了!!!那也表明wepy的脏检查存在一些性能的不足呀,希望未来wepy有改进!
    发表于 2019-1-24 13:34:32 | 显示全部楼层
    这个帖一般般,还可以哦。
    回复

    使用道具 举报

    发表于 2019-2-3 12:51:56 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    发表于 2019-2-3 19:10:39 | 显示全部楼层
    额,看不懂在说神马~@_@
    回复

    使用道具 举报

    发表于 2019-2-5 11:45:47 | 显示全部楼层
    回的人少,我来小顶一下
    回复

    使用道具 举报

    发表于 2019-2-10 00:55:14 | 显示全部楼层
    我只是路过打酱油的
    回复

    使用道具 举报

    发表于 2019-2-10 01:34:21 | 显示全部楼层
    珍惜生命,果断回帖。
    回复

    使用道具 举报

    发表于 2019-2-10 13:39:46 | 显示全部楼层
    么有分,谁能送我点积分啊::>_<::
    回复

    使用道具 举报

    发表于 3 天前 | 显示全部楼层
    正需要,支持楼主大人了!
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表