vue列表数据倒计时存在的一些坑
2024-08-30 19:46:30
vue 列表数据倒计时,在页面销毁前需要清除定时器,否着会报错。
export default {
data() {
return {
list: []
}
},
mounted() {
for (let i in this.list) {
this.countDown(i)
}
},
destroyed() {
// 在这个生命周期中清除定时器
for (let i in this.list) {
clearInterval(this.list[i].countDownFn);
}
},
methods: {
formatTime(s) {
let Day = parseInt(s / 60 / 60 / 24, 10)
let Hour = parseInt(s / 60 / 60 % 24, 10)
let Minute = parseInt(s / 60 % 60, 10)
let Second = parseInt(s % 60, 10)
let res = {
d: Day,
h: (Hour + "").padStart(2, "0"),
m: (Minute + "").padStart(2, "0"),
s: (Second + "").padStart(2, "0")
}
return res;
},
countDown(i) {
let item = this.list[i]
this.list[i].countDownFn = setInterval(() => {
item.time_remaining -= 1
if (item.time_remaining <= 0) {
clearInterval(this.list[i].countDownFn);
} else {
item.countDownTime = item.time_remaining > 0 ? this.formatTime(item.time_remaining) : {}
}
}, 1000);
}
}
}
最新文章
- oracle 导库建立测试库
- Spring 4 官方文档学习(十一)Web MVC 框架之编码式Servlet容器初始化
- Week2学习过程报告
- Cellphone Typing 字典树
- linux环境下的伪分布式环境搭建
- [HIHO1323]回文字符串(区间dp)
- selenium webdriver(1)---浏览器操作
- Matlab与CCS的连接
- IOS开发,如何用最新的Itunes给手机装ipa文件
- Carries SCU - 4437
- 记录解决python在spark运行加载第三方库的问题
- SQL Server 创建跨库查詢、修改、增加、删除
- echarts 滚动条 缩放
- koa2框架设置响应和请求头
- java中微信统一下单采坑(app微信支付)
- linux命令之 df file fsck fuser
- 1分钟试用PowerShell 5.0新功能PowerShellGet安装Script Browser和Script Analyzer
- php脚本#!/usr/bin/env php写法的好处
- 1.带宽&;吞吐量
- 以太坊测试网络搭建以及RPC服务开启-配置注意事项
热门文章
- Appstore排名前十的程序员应用软件
- BZOJ2179: FFT快速傅立叶 FFT实现高精度乘法
- 路飞学城Python-Day30
- js-数组和字符串转化
- CF1027F Session in BSU (并查集+树上构造)
- tyvj1864 [Poetize I]守卫者的挑战
- B-Tree概念
- mysql局域网服务搭建
- [React] Integration test a React component that consumes a Render Prop
- 使用默认system_health分析死锁(Deadlock)