setInterval如何实现暂停效果？

setInterval 实现暂停效果的思路：

1、用一个变量保存总秒数，用一个变量保存当前的setInterval

2、每过一秒钟都更新到总秒数的变量里面

3、点击暂停按钮，清空当前setInterval，但是不清空总秒数

4、点击继续，则新开一个计时，继续累加之前的秒数

5、如果要重头开始，则需要清空当前setInterval并且清空当前秒数。

以下为vue中的demo:

data() {
    return {
      setIntervalData: null,
      currSeconds: 0
    };
  },
  mounted() {
    // 开始计时
    this.startTimer();
  },
  methods: {
    showTimer(currSeconds) {
      var currMinutes = currSeconds/60
       // 每一秒钟提示一次，具体几秒钟可自定义，如果需要每五分钟提示一次，就currMinutes % 5 === 0
      if (currMinutes % 1 === 0) {
        console.log(`已汇报${currMinutes}分钟`)
        this.$notify({
        title: "",
        message: `已汇报${currMinutes}分钟`,
        position: "bottom-right",
        duration: 0,
        customClass: 'countdown-timer'
      });
      }
    },
    startTimer() {
    // 开始新的计时，不管暂停还是重新开始都新开一个setInterval，并且累加秒
      this.setIntervalData = setInterval(() => {
        this.currSeconds += 1;
        this.showTimer(this.currSeconds);
      }, 1000);
    },
    /**
     * 清空定时器且清空总秒数
     */
    clearTimer() {
      clearInterval(this.setIntervalData)
      this.currSeconds = 0
    },
    /**
     * 暂时定时器：需清空定时器，但不清除已统计总时长，方便在暂停后重启定时器
     */
    puseTimer() {
      clearInterval(this.setIntervalData)
    }

本文章由javascript技术分享原创和收集