vue页面使用多个定时器的方法
作者:琳木兮
这篇文章主要为大家详细介绍了vue页面使用多个定时器的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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="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); } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。