本文实例为大家分享了vue页面使用多个定时器的具体代码，供大家参考，具体内容如下
问题描述
vue页面使用多个定时器
html：
<div class="prod-item">
<ul>
<li
v-for="(item, index) in state.list"
:key="index"
:class="[
item.isDisabled ? 'active_li_02' : 'active_li_01',
'flex ml-10 mr-10 mt-25',
]"
>
<div class="img">
<img :src="https://www.atool.online/article/item.imageUrl" alt="" />
</div>
<div class="item-right">
<div
:class="[
item.isDisabled ? 'active_title_02' : 'active_title_01',
'title',
]"
>
{{ item.name }}
</div>
<van-button
type="default"
:class="[
item.isDisabled ? 'active_btn_02' : 'active_btn_01',
'btn mt-30',
]"
@click.stop="checkLoginUser(item)"
:disabled="item.isDisabled"
>
{{ item.saleTit }}
</van-button>
</div>
</li>
</ul>
</div>js：
js：请求数据，遍历数组，然后根据数据字段判断，如果服务器的开始时间小于服务器的系统时间那就倒计时，appointmentStatus 这个字段为2的时候 且服务器的开始时间小于服务器的系统时间.let appointStart = new Date( item.appointStart.replace(/-/g, "/") ).getTime(); 这个是兼容ios的时间格式
const getProdList = async () => {
//预售商品列表
await $api.fns.PreSale.getPreSaleList({
params: {
iconType: 2,
},
})
.then((res) => {
if (res?.data) {
console.log(res.data);
// `appointment_status`'预约状态 1已上架、2已下架',
state.list = res.data;
res.data.map((item) => {
item.isDisabled = true;
item.saleTit = "等待预约";
item.timer = null;
if (item.appointStart) {
let appointStart = new Date(
item.appointStart.replace(/-/g, "/")
).getTime();
let systemDate = new Date(
item.systemDate.replace(/-/g, "/")
).getTime();
item.times = Math.round(
parseInt(appointStart - systemDate) / 1000
);
}
});
state.list = res.data;
state.list.map((item, index) => {
if (item.appointmentStatus === 2) {
if (item.times) {
// 还没有开始预购
if (item.times > 0) {
startCountdown(item.times, index);
// 预购结束
} else {
item.isDisabled = true;
item.saleTit = "预购结束";
}
// 时间为空的时候，就只有预购结束，和立即预购两种状态
} else {
item.isDisabled = true;
item.saleTit = "预购结束";
}
} else {
item.isDisabled = false;
item.saleTit = "立即预购";
}
});
}
})
.catch((error) => {
console.log(error);
});
};因为每一个定时器的时间都不一样，所以每一个定时器结束了要清除定时器 window.clearInterval(state.list[index].timer);
// 倒计时
const startCountdown = (times, index) => {
console.log("index", index, state.list);
// 跟开始时间相比如果当前时间小于开始时间，那就还没有开始
// let times = Math.round(parseInt(appointStart - systemDate) / 1000);
if (times > 0) {
state.list[index].timer = setInterval(() => {
state.list[index].times--;
console.log("state.times-----111", state.list[index].times);
if (state.list[index].times === 0) {
state.list[index].times = 0;
state.list.map(() => {
state.list[index].isDisabled = false;
state.list[index].saleTit = "立即预购";
});
window.clearInterval(state.list[index].timer);
}
}, 1000);
}
};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
