在項目開發中，我們經常會遇到壹個發送驗證碼的按鈕，點擊後會有60秒的倒計時。很常見但是很簡單，但是寫這個按鈕的時候有壹些地方需要註意。今天就寫。如果妳有任何問題，請指正！
完成後的效果如下:
為了更快地顯示效果，我將時間設置為5秒。按鈕被點擊後，會有倒計時，同時按鈕會變成不可點擊，樣式也會發生變化，鼠標的外觀也會發生變化。
接下來，我們使用代碼來實現它:
& ltbutton class =“button“@ click =“count down“& gt；
{ {內容}}
& lt/button & gt；
...
data（）{
返回{
內容:‘發送驗證碼’，//按鈕中顯示的內容。
TotalTime: 60 //記錄具體的倒計時時間。
}
},
方法:{
倒計時（）{
let clock = window . setinterval（（）= & gt；{
這。總計-
This.content = this.total+“然後再次發送“
},1000)
}
}數據中添加了兩條數據，壹條用於記錄時間，另壹條用於保存倒計時按鈕的具體內容。在倒計時功能中，我們使用setInterval計時器每秒從totalTime中減去1，同時更改按鈕中顯示的內容。window.setInterval中使用了arrow函數，因為它會自動綁定外部this，所以不需要先保存this。
效果如下:
但是這個按鈕仍然存在壹些問題:
點擊按鈕後，直接從59秒倒數到1秒，中間的60消失了。
倒計時時也可以點擊。
倒計時尚未清除。
接下來，我們需要繼續完善倒計時功能來解決這些問題。
倒計時（）{
This.content = this.totalTime+的並重新發送‘//在這裏，錯過60秒的問題得到了解決。
let clock = window . setinterval（（）= & gt；{
這。總時間-
this . content = this . total time+‘然後再次發送‘
if（this . total time & lt；0）{//當倒計時小於0時清除計時器。
window.clearInterval（時鐘）
This.content =“重新發送驗證碼”
this.totalTime = 60
}
},1000)
}，上面的代碼解決了60缺失的問題，同時，當totalTime小於0時，它會清除同步器，重置按鈕中的內容，並將totalTime重置為60以供下次使用。
倒計時10秒的效果:
當發現bug時，多次點擊後反向語音的速度會變得更快，因為每次點擊都會啟動壹個setInterval，而這些setInterval會減少總時間。解決方法也很簡單:只需節流即可，即第壹次單擊按鈕後，countdown函數的代碼無法執行，只能在倒計時結束後再次執行。
data（）{
返回{
內容，‘發送驗證碼‘，
總時間:10，
CanClick: true //添加CanClick
}
}
...
倒計時（）{
如果(！this . can click）return//更改這兩行代碼。
this.canClick = false
this . content = this . total time+‘然後再次發送‘
let clock = window . setinterval（（）= & gt；{
這。總時間-
this . content = this . total time+‘然後再次發送‘
if（this . total time & lt；0) {
window.clearInterval（時鐘）
This.content =“重新發送驗證碼”
this.totalTime = 10
This.canClick = true //在此重新打開。
}
},1000)
}添加canClick in數據。默認值為true。如果canClick為真，則可以執行倒計時中的代碼，但如果為假，則不能執行。每次執行canClick時將其設置為false，然後僅在倒計時結束時將其更改為true。所以剛才的問題就沒有了。
實際上，這裏差不多就夠了，但妳也可以調整風格:
& ltbutton class =“button“:class =“{ disabled:！this . can click }“@ click =“count down“& gt；
...
。已禁用{
背景色:# ddd
邊框顏色:# ddd
顏色:# 57a3f3
光標:不允許；//鼠標變化
}效果:
這個倒計時按鈕很簡單，但是我剛寫的時候還是很亂的，當時還不知道函數節流的概念。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上的其他相關文章！
推薦閱讀:
如何使用Vue編寫雙向數據綁定
如何使用Vue實現proxy代理