倒计时缓存时间问题总结

时间:2019-01-10 16:40:12 来源:互联网 作者: 神秘的大神 字体:

业务场景:

在详情页点击按钮之后,按钮禁用,过3s后按钮才能点击。

我用的vue,大列表点进去的详情页。

<el-button" @click="checkBtn" :disabled="checkdisabled">点此检测 </el-button>

 1   checkBtn() { //点击事件  2     this.countDown(180);  3   },  4   countDown(time) {  5     localStorage.setItem(id, Date.now()) //把点击按钮时的时间存到localStorage  6     const timeNum = time //倒计时  7     this.checkdisabled = true //禁用  8     const timer = setInterval(() => {//倒计时  9       this.timeNum-- 10       if (this.timeNum <= 0) {//达到3分钟时停止倒计时 11         clearInterval(timer) 12         this.checkdisabled = false 13         localStorage.removeItem(id) 14       } 15     }, 1000) 16   }, 17   mounted() { 18     const preTime = localStorage.getItem(id)//获取点击按钮时的时间 19     if (!preTime) return 20     const timeNum = parseInt((Date.now() - preTime) / 1000)//当前时间跟点击按钮时候的时间差,并换算成s 21     if (timeNum >= 180) {如果这个时间差大于180s,则证明过了3分钟, 22       localStorage.removeItem(id) 23     } else {//否则,将剩余的时间传进去,继续倒计时 24       this.countDown(180 - timeNum) 25     } 26   }

需要注意的是,把时间存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