uni-app #插件讨论# uni-countdown 倒计时 - DCloud前端团队 如何控制暂停倒计时

在uni-app中使用uni-countdown插件实现倒计时功能时，控制倒计时的暂停和继续是一个常见的需求。虽然uni-countdown插件本身可能不直接提供暂停和继续的方法，但你可以通过管理倒计时的状态和时间来实现这一功能。

以下是一个示例代码，展示了如何在uni-app中实现倒计时的暂停和继续功能：

<template>
  <view>
    <text>{{ formattedTime }}</text>
    <button @click="startOrPause">{{ isPaused ? '继续' : '暂停' }}</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      endTime: null, // 结束时间戳
      intervalId: null, // 定时器ID
      isPaused: false, // 是否暂停
      remainingTime: 60 * 1000, // 剩余时间，单位毫秒（例如：60秒）
    };
  },
  computed: {
    formattedTime() {
      const now = Date.now();
      let timeLeft = this.endTime - now;
      if (timeLeft < 0) timeLeft = 0;
      const minutes = Math.floor(timeLeft / (1000 * 60));
      const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
  },
  methods: {
    startCountdown(duration) {
      this.remainingTime = duration;
      this.endTime = Date.now() + duration;
      this.isPaused = false;
      this.tick();
    },
    tick() {
      if (this.isPaused) return;
      this.intervalId = setInterval(() => {
        if (Date.now() >= this.endTime) {
          clearInterval(this.intervalId);
          this.intervalId = null;
        }
      }, 1000);
    },
    startOrPause() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
      this.isPaused = !this.isPaused;
      if (!this.isPaused) {
        this.tick();
      }
    },
  },
  mounted() {
    this.startCountdown(this.remainingTime);
  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
};
</script>

在这个示例中，我们通过管理endTime（结束时间戳）和isPaused（是否暂停）状态来控制倒计时的进行。startOrPause方法用于切换倒计时的暂停和继续状态。当倒计时正在进行时，如果点击按钮，它将暂停倒计时；如果倒计时已暂停，点击按钮将继续倒计时。注意，在组件销毁前，我们需要清除定时器以防止内存泄漏。