How to use multiple timers for vue page

This article has shared the specific code of using multiple timers on the vue page for your reference. The specific content is as follows

Problem description

vue page uses multiple timers

html：

<div class="prod-item">
      <ul>
        <li
          v-for="(item, index) in "
          :key="index"
          :class="[
             ? 'active_li_02' : 'active_li_01',
            'flex ml-10 mr-10  mt-25',
          ]"
        >
          <div class="img">
            <img :src="" alt="" />
          </div>
          <div class="item-right">
            <div
              :class="[
                 ? 'active_title_02' : 'active_title_01',
                'title',
              ]"
            >
              {{  }}
            </div>
            <van-button
              type="default"
              :class="[
                 ? 'active_btn_02' : 'active_btn_01',
                'btn mt-30',
              ]"
              @="checkLoginUser(item)"
              :disabled=""
            >
              {{  }}
            </van-button>
          </div>
        </li>
      </ul>
</div>

js：

js: Request data, traverse the array, and then judge based on the data field. If the start time of the server is less than the system time of the server, then count down.appointmentStatus When this field is 2, the server start time is less than the server's system time.
let appointStart = new Date( (/-/g, "/") ).getTime(); This is an ios-compatible time format

const getProdList = async () =&gt; {
      //Pre-sale product list      await $({
        params: {
          iconType: 2,
        },
      })
        .then((res) =&gt; {
          if (res?.data) {
            ();
            // `appointment_status`'Appointment status 1 has been launched, 2 has been removed',             = ;
            ((item) =&gt; {
               = true;
               = "Waiting for an appointment";
               = null;
              if () {
                let appointStart = new Date(
                  (/-/g, "/")
                ).getTime();
                let systemDate = new Date(
                  (/-/g, "/")
                ).getTime();
                 = (
                  parseInt(appointStart - systemDate) / 1000
                );
              }
            });
             = ;
            ((item, index) =&gt; {
              if ( === 2) {
                if () {
                  // Pre-order has not started yet                  if ( &gt; 0) {
                    startCountdown(, index);
                    // Pre-order ends                  } else {
                     = true;
                     = "Preorder ends";
                  }
                  // When the time is empty, there is only two states: pre-order ends and immediate pre-order                } else {
                   = true;
                   = "Preorder ends";
                }
              } else {
                 = false;
                 = "Preorder now";
              }
            });
           
          }
        })
        .catch((error) =&gt; {
          (error);
        });
    };

Because the time of each timer is different, the timer must be cleared when each timer is finished([index].timer);

// Countdownconst startCountdown = (times, index) =&gt; {
      ("index", index, );
      // Compared with the start time, if the current time is less than the start time, then it has not started yet      // let times = (parseInt(appointStart - systemDate) / 1000);
      if (times &gt; 0) {
        [index].timer = setInterval(() =&gt; {
          [index].times--;
          ("-----111", [index].times);
          if ([index].times === 0) {
            [index].times = 0;
            (() =&gt; {
              [index].isDisabled = false;
              [index].saleTit = "Preorder now";
            });

            ([index].timer);
          }
        }, 1000);
      }
    };

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.