目录

一、问题引入

二、错误代码：

三、错误原因

四、修正的代码

附 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 = nullclearInterval(num)}}
const stopTimer = () => {if (num) {clearInterval(num);num = null;}
};</script>

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

但是没有成功

三、错误原因

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

四、修正的代码

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

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

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

 Vue SFC Playground （点击进入）

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