倒计时缓存时间问题总结

业务场景：

在详情页点击按钮之后，按钮禁用，过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

 

转载于:https://www.cnblogs.com/woniubushinide/p/10250020.html