面向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;  // 鼠標變化
}
複製代碼

效果：

這個倒計時按鈕十分簡單，可是我第一次寫的時候仍是寫的很亂，並且那個時候還不知道函數節流的概念，也不清楚屢次點擊爲啥倒計時會變快，如今理解了寫在這裏。若是還有什麼不足，還但願你們多多批評指正！

這是我在掘金寫的第六篇文章，感謝您的觀看！