目录

一、问题引入

二、错误代码：

三、错误原因

四、修正的代码

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

一、问题引入

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

二、错误代码：

<code>

<template>

<button @click="increment">code>

{ { count }}

</button>

<br>

<button >

{ { count2 }}

</button>

<br>

<button >

{ { count3 }}

</button>

<button @click="stopTimer">code>

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）

但是没有成功

三、错误原因