小程序模板網(wǎng)

小程序倒計時深究

發(fā)布時間:2018-12-29 08:55 所屬欄目:小程序開發(fā)教程
小程序倒計時重疊抖動問題
因為請求數(shù)據(jù)寫在onShow 函數(shù)里面,所以每次切換界面都會刷新,這就會導致,如果當前 定時器在跑的話,再次刷新會再次常見定時, 那么就會導致刷新幾次有幾個定時器,同時在跑,那么前端界面顯示的計時數(shù)字 就會不時跳動,所以需要保證在跑的定時器只有一個。將定時器對象創(chuàng)建為全局的,在每次開啟定時器的時候先清空之前的定時器。就可以解決刷新后計時閃動的問題了,或者在在tab頁面,運用 onHide 周期 進行 clearTimeInterval清空 , 在 非tab頁面,運用onUload() 周期 進行 clearTimeInterval清空,百度都可以找到類似解決方案,其中在我的歷史文章小程序實戰(zhàn)踩坑之B2B商城項目總結也有總結,代碼類似如下:
 
/**
   * 清除interval
  * @param that
  */
 clearTimeInterval: function (that) {
    var interval = that.data.interval;
    clearInterval(interval)
  },
 
 /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   * 退出本頁面時停止計時器
  */
 onUnload:function () {
      var that = this;
      that.clearTimeInterval(that)
 },
 
 /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   * 在后臺運行時停止計時器
  */
 onHide:function () {
      var that = this;
      that.clearTimeInterval(that)
 }
倒計時使用setInterval或setTimeout觸摸屏幕導致時間顯示的突跳,突慢問題,卡頓,甚至停止
不信的同學,可以嘗試用手指觸摸屏幕,上下小幅上下移動不放,你會發(fā)覺時間竟然停止了。(特別是針對低端機型)
 
通常同學寫代碼都會如此:
 
                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清空定時器。這步必須要做,就不多說了,要不還是會出現(xiàn)上面說的“小程序倒計時重疊抖動問題”問題。
 
用了上面代碼,補失的精準度不足。小心的測試同學會發(fā)現(xiàn)觸摸屏幕導致的突跳,突慢問題,甚至停止!于是各種尋思,去找了拼多多小程序,京東購物小程序各種對比。 結論是拼多多存在和我一樣的問題,京東購物小程序的倒計時沒這樣的問題,給個贊!
 
出現(xiàn)問題環(huán)境描述:
 
小程序框架:wepy : "^1.7.2"
測試機型:紅米3
自身思路是wepy臟檢查在觸摸(滾動)屏幕下引起性能占用導致的一些效率不足問題,做了進一步測試,還是用紅米3機型,拋掉組件,拋掉data,只保留data,做一個簡單的渲染,將頁面高度固定,讓屏幕可以上下滑動,代碼如下:
 
<style>
    .content {
        height: 2000rpx;
        border: 1rpx solid red;
    }
    .child {
        height: 500rpx;
    }
</style>
<template>
    <view class="content">
        <view class="child"></view>
        {{endtimestr}}
    </view>
</template>
<script>
    import wepy from 'wepy';
    export default class test extends wepy.page {
        data = {
            endtimestr: ''
        }
        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);
        }
        dateformat = (micro_second) => {
            // 總秒數(shù)
            var second = Math.floor(micro_second / 1000);
            // 天數(shù)
            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);
        }
    }
</script>
結論是: 倒計時在觸摸(滾動)情況下正常了?。?!那也表明wepy的臟檢查存在一些性能的不足呀,希望未來wepy有改進!
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25057.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢