面向Vue新人：寫一個簡單的倒數計時按鈕

limingru發表於2018-04-20
Vue

在專案開發裡，我們經常會遇到傳送驗證碼、點選了之後有60秒倒數計時的按鈕，很常見卻也很簡單，但是在寫這個按鈕的時候有個別地方還要注意下，今天寫出來，如有問題歡迎指正！

完成的效果如下：

面向Vue新人：寫一個簡單的倒數計時按鈕

為了更快顯示出效果，我把時間設成了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了。

效果如下圖：

面向Vue新人：寫一個簡單的倒數計時按鈕

但是這個按鈕還有一些問題：

  • 點選了按鈕之後過了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秒的效果：

面向Vue新人：寫一個簡單的倒數計時按鈕

發現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。這樣剛才的問題就沒有了。

面向Vue新人：寫一個簡單的倒數計時按鈕

到這裡其實就差不多了，不過還可以調整下樣式：

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

...

.disabled{
  background-color: #ddd;
  border-color: #ddd;
  color:#57a3f3;
  cursor: not-allowed;  // 滑鼠變化
}
複製程式碼

效果：

面向Vue新人：寫一個簡單的倒數計時按鈕

這個倒數計時按鈕十分簡單，但是我第一次寫的時候還是寫的很亂，而且那個時候還不知道函式節流的概念，也不清楚多次點選為啥倒數計時會變快，現在理解了寫在這裡。如果還有什麼不足，還希望大家多多批評指正！

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

相關文章