vue时间倒计时-休眠用法/计时器用法

Posted 2020-11-24 yishifuping

倒计时的两种用法：

一、计时器的用法

页面部分

<span class="time-minute">{{timeMinute}}</span>
<span class="time-unit">分</span>
<span class="time-second">{{timeSecond}}</span>
<span class="time-unit">秒</span>

 

js部分

export default {
    data() {
        return {
            // 倒计时
            value:14,
            // 秒数
            second:59,
            // 分钟（定时器名称）
            minute:null,
            // 毫秒（定时器名称）
            millisecond:null,
        }
    }
    // 计算属性
    computed: {
        //  格式化倒计时分钟
         timeMinute() {
             if (this.value < 10) 
                 return `0${this.value}`;
             return this.value;
         },
         timeSecond() {
             if (this.second < 10) 
                 return `0${this.second}`;
             return this.second;
         },        
      }
    // 关闭页面
    beforeDestroy() {
        // 清空分钟定时器
         clearInterval(this.minute);    
        // 清空秒定时器
         clearInterval(this.millisecond);     
        // 分钟（定时器名称）
         this.minute=null,
        // 秒（定时器名称）
         this.millisecond=null,
    },
// 方法
methods: {
    bearing() {
            this.sleepTen()
            // 倒计时分钟
             this.minute = setInterval(() => {
                 if(this.value<0) this.value = 14
                 this.value -= 1
             }, 60000);
             // 倒计时秒
             this.millisecond = setInterval(() => {
                 if(this.second<1) this.second = 60
                 this.second -=1
                 if(this.value<0 && this.second<1) {
                     // 从新调取二维码
                     this.renovate()
                 }
             }, 1000);
        }   
    } 
}

二、休眠用法

页面还是上面的页面

js部分

    // 每一次跑的事件   
     sleep(duration) {
            return new Promise(resolve => {
                setTimeout(resolve, duration * 1000)
            })
        },
        // 执行倒计时
        async sleepTen() {
            // 15分钟总共的秒数
            let timepredict = 15*60
            // 循环去倒计时
            for(; timepredict> 0; ) {
                // 每一次都减1并执行上面的事件
                timepredict = timepredict - 1;
                await this.sleep(1);
                // 分钟（取整）
                this.value = Math.floor(timepredict / 60);
                // 秒（取余）
                this.second = timepredict % 60;
            }
        },

优缺点对比：

1、休眠用法代码要比计时器的代码要少很多（代码简洁）

2、休眠用法他只要关闭这个页面后，程序跑完只要你不做从新调取，它只会执行一遍，计时器如果你不关掉的话，会一直执行（需要设置开关）

3、倒计时上区分，时分秒只需要在for循环上进行计算就行了，不用在每一个方法去进行计算时分秒（计算简洁）