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);
      }
    };

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