记录一下前端定时器清除失效的问题

目录

一、问题引入

二、错误代码：

三、错误原因

四、修正的代码

附 vue提供的线上运行代码网址以便证实可用性

---

一、问题引入

按理说，打开定时器  xxx = setInterval(()=>{  },100)，之后只要  clearInterval(xxx) 就可以顺利关闭定时器了 ，但是在我操作的过程中发现，并不是这样的，经尝试发现了问题所在。话不多说直接上代码：

二、错误代码：

<template>
  <button @click="increment">
    {{ count }}
  </button>
  <br>
  <button >
    {{ count2 }}
  </button>
  <br>
  <button >
    {{ count3 }}
  </button>
  <button @click="stopTimer">
   Stop
  </button>
</template>

<script setup>
import { ref, watch } from 'vue'

let num  = null;
const count = ref(0)
const count2 = ref(0)
const count3 = ref(0)

function increment() {
  count.value++
    if(count.value == 1 ){
      num = setInterval(()=>{
        increment()
      },100)
  
      console.log(111,num)
    }         

     if(num){
        count2.value++
    }

    if(count.value == 20){
      count3.value++
      num = null
      clearInterval(num)
    }

}
const stopTimer = () => {
  if (num) {
    clearInterval(num);
    num = null;
  }
};

</script>

（这里有三个数字和一个按钮，当单击第一个按钮0，会触发定时器一直累加第一个count，当达到20，关闭定时器，第三个0变为1）

但是没有成功

三、错误原因

因为先清空了定时器的 "引用"，所以再使用 clearInterval 就无法指向目标定时器，因此count会一直加值。

四、修正的代码

及先使用 clearInterval 方法去清空目标定时器，再清空定时器引用

（不是专业前端，这里我用后端的引用思维表达了一下我对问题的看法，大家感觉不合适的可以 私信或者评论区指正  ）

附 vue提供的线上运行代码网址以便证实可用性

 Vue SFC Playground （点击进入）

--------------------------------------------------------------------------------------------------------