倒计时缓存时间问题总结

2019-01-10 07:47:58来源：博客园阅读 ()

业务场景：

在详情页点击按钮之后，按钮禁用，过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里是为了，去了别的页面时依然计算倒计时。