面向Vue新人：写一个简单的倒计时按钮

在项目开发里，咱们常常会遇到发送验证码、点击了以后有60秒倒计时的按钮，很常见却也很简单，可是在写这个按钮的时候有个别地方还要注意下，今天写出来，若有问题欢迎指正！

完成的效果以下：

为了更快显示出效果，我把时间设成了5秒。按钮在点击以后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。

接下来咱们用代码来实现：

<button class="button" @click="countDown">
  {{content}}
</button>

...

data () {
    return {
      content: '发送验证码',   // 按钮里显示的内容
      totalTime: 60           //记录具体倒计时时间
    }
},
methods: {
    countDown() {
        let clock = window.setInterval(() => {
            this.totalTime--
            this.content = this.total + 's后从新发送'
        },1000)
    }
}
复制代码

在data里加了两条数据，一条用来记录时间，一条用来盛放倒计时按钮的具体内容。在countDown函数里咱们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。在window.setInterval里用了箭头函数，由于它会自动绑定外面的this，因此就不用先存下this了。

效果以下图：

可是这个按钮还有一些问题：

• 点击了按钮以后过了1秒就直接从59秒开始倒计时了，中间的60不见了
• 倒计时的时候还能够点击
• 尚未清除倒计时

接下来须要继续完善countDown函数来解决这些问题。

countDown () {
  this.content = this.totalTime + 's后从新发送'  //这里解决60秒不见了的问题
  let clock = window.setInterval(() => {
    this.totalTime--
    this.content = this.totalTime + 's后从新发送'
    if (this.totalTime < 0) {         //当倒计时小于0时清除定时器
        window.clearInterval(clock)
        this.content = '从新发送验证码'
        this.totalTime = 60
        }
  },1000)
},
复制代码

上面的代码解决了60不见的问题，同时当totalTime小于0时清除同时器、从新设置按钮里的content、将totalTime重置为60以便下次使用。

倒计10秒的效果：

发现bug，屡次点击以后，倒讲时速度变快，这是由于每次点击都会启动一个setInterval，这些setInterval都会减小totalTime。解决的方法也很简单：简单节流一下就行了，就是第一次点击按钮以后让countDonw这个函数的代码不可执行，等到倒计时结束以后才能够再次执行。

data () {
    return {
      content: '发送验证码',
      totalTime: 10,
      canClick: true  //添加canClick
    }
}

...

countDown () {
  if (!this.canClick) return   //改动的是这两行代码
  this.canClick = false
  this.content = this.totalTime + 's后从新发送'
  let clock = window.setInterval(() => {
    this.totalTime--
    this.content = this.totalTime + 's后从新发送'
    if (this.totalTime < 0) {
      window.clearInterval(clock)
      this.content = '从新发送验证码'
      this.totalTime = 10
      this.canClick = true   //这里从新开启
    }
  },1000)
}
复制代码

在data里添加canClick，默认是true，若是canClick为true，countDown里的代码能够执行，若是是false就不行。每执行一次就将canClick设为false，而只在倒计时结束的时候再改成true。这样刚才的问题就没有了。

到这里其实就差很少了，不过还能够调整下样式：

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">

...

.disabled{
  background-color: #ddd;
  border-color: #ddd;
  color:#57a3f3;
  cursor: not-allowed;  // 鼠标变化
}
复制代码

效果：

这个倒计时按钮十分简单，可是我第一次写的时候仍是写的很乱，并且那个时候还不知道函数节流的概念，也不清楚屡次点击为啥倒计时会变快，如今理解了写在这里。若是还有什么不足，还但愿你们多多批评指正！

这是我在掘金写的第六篇文章，感谢您的观看！