倒數計時快取時間問題總結

super_素素發表於2019-01-10
快取

業務場景：

在詳情頁點選按鈕之後，按鈕禁用，過3s後按鈕才能點選。

我用的vue，大列表點進去的詳情頁。

 1 <el-button” @click=”checkBtn” :disabled=”checkdisabled”>點此檢測 </el-button>

 2 checkBtn() { //點選事件
 3   this.countDown(180);
 4   localStorage.setItem(id, Date.now()) //把點選按鈕時的時間存到localStorage
 5 }，
 6 countDown(time) {
 7   const timeNum = time //倒數計時
 8   this.checkdisabled = true //禁用
 9   const timer = setInterval(() => { //倒數計時
10     this.timeNum--
11     if (this.timeNum <= 0) { //達到3分鐘時停止倒數計時
12       clearInterval(timer)
13       this.checkdisabled = false
14       localStorage.removeItem(id)
15     }
16   }, 1000)
17 }，
18 mounted() {
19   const preTime = localStorage.getItem(id) //獲取點選按鈕時的時間
20   if (!preTime) return
21   const timeNum = parseInt((Date.now() - preTime) / 1000) //當前時間跟點選按鈕時候的時間差，並算成s
22   if (timeNum >= 180) {
23     如果這個時間差大於180s， 則證明過了3分鐘，
24     localStorage.removeItem(id)
25   } else { //否則，將剩餘的時間傳進去，繼續倒數計時
26     this.countDown(180 - timeNum)
27   }
28 }
29 
30 需要注意的是， 把時間存localStorage裡是為了， 去了別的頁面時依然計算倒數計時。
最後的落幕： 推薦一下騰訊雲的伺服器， 搞活動真的很便宜啦， 3 折3折
https: //cloud.tencent.com/redirect.php?redirect=1014&cps_key=0fe886ef07870a50bf9a175e21a71046&from=console
阿里雲的對比一下下啦， 雖然2折
https: //promotion.aliyun.com/ntms/act/qwbk.html?userCode=d3wdmq73

 

相關文章