小程序倒計時深究

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

由於請求數據寫在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有改進！