vue实现倒计时秒杀(多个倒计时)

data:{
    return{
          raidersData:[],
          interval: null, // 将interval定义为数据属性
          intervalMap: {}, // 存储定时器的map
          healthList:{},
    }
}


//离开页面清除  
beforeDestroy() {
    this.clearAllInterval(); // 清除所有定时器
},


    //-----倒计时 开始------
    async onlogding() {
      let that = this;
      let loading;
      try {
        loading = await this.$ionic.loadingController.create({
          message: '加载中..',
        });
        await loading.present();

        let id = this.$store.state.user.id
        const res = await this.$http.post(this.$partten.mbrUrl + '/SnatchTreasure/round', { id })

        // 清除旧的定时器
        this.clearAllInterval();
        if(res.body.length>0){
          res.body.forEach((item, index) => {
            if (item.startTime && item.endTime) {
              const startTime = moment(item.startTime).format('YYYY-MM-DD HH:mm:ss');
              const endTime = moment(item.endTime).format('YYYY-MM-DD HH:mm:ss');
              const nowTime = moment().format('YYYY-MM-DD HH:mm:ss');
              if (moment(nowTime).isBefore(startTime)) {
                item.state = 2; //待开始

                // 更新倒计时函数
                const updateCountdown = () => {
                  const nowTime = moment().format('YYYY-MM-DD HH:mm:ss'); //获取最新的当前时间
                  const duration = moment.duration(moment(startTime).diff(moment(nowTime))); // 剩余时间差
                  let hours = Math.floor(duration.asHours());
                  let minutes = duration.minutes();
                  let seconds = duration.seconds();
                  // 将小时、分钟和秒数格式化为两位数，并以 : 分隔
                  hours = ("0" + hours).slice(-2);
                  minutes = ("0" + minutes).slice(-2);
                  seconds = ("0" + seconds).slice(-2);

                  item.countdown = { hours, minutes, seconds };
                  // console.log(item.countdown,'222')

                  if (hours <= 0 && minutes <= 0 && seconds <= 0) {
                    clearInterval(that.intervalMap[index]); // 时间结束，停止倒计时
                    item.state = 1; //开始
                  } else {
                    duration.subtract(1, 's'); // 每秒减少1秒
                  }
                };
                updateCountdown();

                // 每秒调用一次更新倒计时函数
                that.intervalMap[index] = setInterval(updateCountdown, 1000);
              } else if (moment(nowTime).isAfter(endTime)) {
                item.state = 0; // 结束
              } else {
                item.state = 1; //进行中

                // 更新倒计时函数
                const updateCountdown = () => {
                  const nowTime = moment().format('YYYY-MM-DD HH:mm:ss'); //获取最新的当前时间
                  const duration = moment.duration(moment(endTime).diff(moment(nowTime))); // 剩余时间差

                  let hours = Math.floor(duration.asHours());
                  let minutes = duration.minutes();
                  let seconds = duration.seconds();

                  // 将小时、分钟和秒数格式化为两位数，并以 : 分隔
                  hours = ("0" + hours).slice(-2);
                  minutes = ("0" + minutes).slice(-2);
                  seconds = ("0" + seconds).slice(-2);

                  item.countdown = { hours, minutes, seconds };
                  // console.log(item.countdown,'111',item.state)
                  if (hours <= 0 && minutes <= 0 && seconds <= 0) {
                    clearInterval(that.intervalMap[index]); // 时间结束，停止倒计时
                    item.state = 0; //结束
                  } else {
                    duration.subtract(1, 's'); // 每秒减少1秒
                    // console.log( duration.subtract(1, 's'),' // 每秒减少1秒')
                  }
                };
                updateCountdown(); // 初始调用更新倒计时函数

                // 每秒调用一次更新倒计时函数
                that.intervalMap[index] = setInterval(updateCountdown, 1000);
              }
            } else {
              item.state = 0;
            }
          });
        }
        //-------倒计时结束-----------

        this.raidersData = res.body;
      } catch (err) {
        console.log('ERROR:' + err);
      } finally {
        if (loading) {
          loading.dismiss();
        }
      }
    },

    activated() {
      this.onloading();
    },
    clearAllInterval() {
      Object.values(this.intervalMap).forEach((intervalId) => {
        clearInterval(intervalId);
      });
      this.intervalMap = {};
    },
    //------倒计时 结束--------