小程序倒計時深究

小程序倒計時重疊抖動問題

因爲請求數據寫在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 <= 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"
• 測試機型：紅米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) => {
            // 總秒數
            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);
        }
    }
</script>

結論是： 倒計時在觸摸（滾動）情況下正常了！！！那也表明wepy的髒檢查存在一些性能的不足呀，希望未來wepy有改進！