定时器如何实现

<template>
    <el-button @click='smsCode' :disabled='status'>{{msg}}</el-button>
</template>

<script>
export default {
    data() {
        status: false,
        msg: '获取验证码',
        time: 60
    },
    metheds: {
        smsCode() {
            var t = setInterval(() =>{
                if (this.time == 0) {
                    this.msg = '发送验证码';
                    this.status = false;
                    this.time = 60;
                    clearInterval(t);
                } else {
                    this.msg = this.time + '秒';
                    this.time--;
                    this.status = true;
                }
            }, 1000);
        }
    }
}
</script>

1. 定时器有什么用

（1）定时器可以让SoC在执行主程序的同时，可以（通过定时器）具有计时功能，到了一定时间（计时结束）后，定时器会产生中断提醒CPU，CPU会去处理中断并执行定时器的ISR。从而去执行预先设定好的事件。

（2）定时器就好像是CPU的一个秘书一样，这个秘书专门管帮CPU来计时，并到时间后提醒CPU要做某件事情。所以CPU有了定时器之后，只需要预先把自己XX时间之后必须要做的事情绑定到定时器中断ISR即可，到了时间之后定时器就会以中断的方式提醒CPU来处理这个事情。

2. 定时器的原理

（1）定时器计时其实是通过计数来实现的。定时器内部有一个计数器，这个计数器根据一个时钟（这个时钟来自于ARM的APB总线，然后经过时钟模块内部的分频器来分频得到）来工作。每隔一个时钟周期，计数器就就计数一次，定时器的时间就是计数器计数值x时钟周期。

（2）定时器内部有1个寄存器TCNT，计时开始时我们会把一个总的计数值（譬如说300）放入TCNT寄存器中，然后每隔一个时钟周期（假设为1ms）TCNT中的值会自动减1（硬件自动完成，不需要CPU软件去干预），知道TCNT中减为0的时候，TCNT就会触发定时器中断。最后的计时时间就是300ms。

（3）定时时间是由2个东西共同决定的：一个是TCNT中的计数值，一个是时钟周期。譬如上例中，定时周期就为300x1ms=300ms。

原文链接：https://blog.csdn.net/taotongning/article/details/104422508