Applet countdown overlapping jitter problem

Because the request data is written in the onShow function, the interface will be refreshed each time, which will cause, if the current timer is running, the refresh will be common timing again, so it will cause several refresh times. There are several timers, running at the same time, so the timing number displayed in the front interface will jump from time to time. So make sure there is only one timer running. Make the timer object global and empty the previous timer each time the timer is started. For TAB pages, use the onHide cycle clearTimeInterval and for non-tab pages, use the onUload() cycle clearTimeInterval. Baidu can find similar solutions, which in my history article small program combat pit of B2B mall project summary is also summarized, similar to the following code:

/** * clear interval * @param that */ clearTimeInterval:function(that) { var interval = that.data.interval; ClearInterval (interval)}, /** * Lifecycle functions -- listen to page unload * stop timer when exiting this page */ onUnload:function() { var that = this; That.cleartimeinterval (that)}, /** * lifecycle function -- listening page hide * stop timer while running in the background */ onHide:function () {
      var that = this;
      that.clearTimeInterval(that)
 }
Copy the code

Countdown using setInterval or setTimeout touching the screen causes the time display to jump, slow down, stall, or even stop

If you don’t believe me, you can touch the screen with your finger and move it up and down. You will notice that time has stopped. (Especially for low-end models)

This is what happens when you write code:

                let self = this;
				let lefttimeSec = time - new Date().getTime();
				let calc = setInterval(function() {
					lefttimeSec -= 1000;
					self.endtimestr = 'To the end of the spell' + self.dateformat(lefttimeSec);
					self.$apply(a);if(lefttimeSec <= 0) { clearInterval(calc); }}, 1000);Copy the code

After using setInterval, the solution of the “small program countdown overlapping jitter problem” mentioned above is used, which only solves the countdown overlapping problem. Written in this way, some accuracy is not high. In fact, very simple, solve the code as follows:

				showCountTime(time){
                    let self = this;
                    setTimeout(function() {let lefttimeSec = time - new Date().getTime();
                        lefttimeSec -= 1000;
                        self.endtimestr = 'To the end of the spell' + self.dateformat(lefttimeSec);
						self.$apply(a); self.showCountTime(time); }, 1000); }Copy the code

Note that setTimeout is used here. For TAB pages, use the onHide cycle for clearTimeout, and for non-tab pages, use the onUload() cycle for clearTimeout. This step must be done, not to say more, or there will be the “small program countdown overlapping jitter problem” problem.

With the above code, the accuracy of the loss is insufficient. Careful testers will find that touching the screen causes popping, slowing, and even stopping! So all kinds of thinking, to find a lot of small program, JINGdong shopping small program comparison. The conclusion is that Pinduoduo has the same problem as me, jingdong shopping mini program countdown does not have such problem, give a thumbs up!

Description of the problem environment:

  • Applets framework :wepy: “^1.7.2”
  • Test model: Redmi 3

My own idea is that wepy is dirty to check some inefficient problems caused by performance consumption under touch (scroll) screen. I have done further tests. I still use Redmi 3 model, throw out components, throw out data, keep data only, do a simple rendering, fix the page height, so that the screen can slide up and down, the code is as follows:

<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 = 'To the end of the spell' + self.dateformat(lefttimeSec);
                self.$apply(a); self.showCountTime(time); }, 1000); } dateformat = (micro_second) => {var second = math.floor (micro_second / 1000); Var day = math. floor(second / 3600/24); // hour var hr = math.floor (second / 3600% 24); // 分钟 var min = math. floor(second / 60%60); // second 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 + "Day" + ' ' + hr + ":" + min + ":" + sec;
            } else {
                return hr + ":" + min + ":"+ sec; }}onLoad() {// API gets time this.showcountTime (1545899950167); } } </script>Copy the code

Conclusion: the countdown is normal in touch (scroll) case!! That also shows that wepy’s dirty check has some performance deficiencies. Hopefully wepy will improve in the future!