vue页面使用多个定时器的方法

本文实例为大家分享了vue页面使用多个定时器的具体代码，供大家参考，具体内容如下问题描述vue页面使用多个定时器html：divclass=prod-itemulli...

本文实例为大家分享了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="vue页面使用多个定时器的方法" />
     </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) {
 php       let appointStart = ne编程w 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;
       statephp.list[index].saleTit = "立即预购";
      });

      window.clearInterval(state.list[index].timer);
     }
    }, 1000);
   }
  };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。