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

Posted yishifuping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue时间倒计时-休眠用法/计时器用法相关的知识,希望对你有一定的参考价值。

倒计时的两种用法:

一、计时器的用法

页面部分

<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循环上进行计算就行了,不用在每一个方法去进行计算时分秒(计算简洁)

以上是关于vue时间倒计时-休眠用法/计时器用法的主要内容,如果未能解决你的问题,请参考以下文章

在手机休眠时运行计时器

iOS 计时器三种定时器的用法NSTimerCADisplayLinkGCD

ios系统屏幕休眠或后台运行倒计时暂停问题

crontab用法

手机休眠,js倒计时停止

C# 计时器用法(DispatcherTimerSystem.Timers.TimerSystem.Threading.Timer)