Jquery clearInterval（timerId）不工作

我想在

mouseenter

事件上开始计数，然后在

mouseleave

事件上停止计数。但是，正如您在本例的控制台中所看到的，mouseleave中的

clearInterval（timerId）

命令不起作用

有什么问题吗

var-timerId；
清除间隔（timerId）；
$（“#演示”）.mouseenter（函数（）{
setTimeout（函数（）{
开始计算（timerId）；
}, 2000)
});
$（“#演示”）.mouseleave（函数（）{
清除间隔（timerId）；
});
功能启动计算（timerId）{
var数=0；
timerId=setInterval（函数（）{
增量（timerId）；
}, 100);
函数增量（timerId）{
如果（数字>=100）{
数字=0；
清除间隔（timerId）；
}否则{
数字++；
控制台日志（编号）；
}
}
}

演示

这个问题是因为您有一个名为

timerId

的

startcounting（）

和

increment（）

函数的参数，它在外部作用域中隐藏了相同名称的变量，这就是您需要的变量

如果删除这些属性，代码将起作用：

var-timerId；
清除间隔（timerId）；
$（“#演示”）.mouseenter（函数（）{
setTimeout（函数（）{
startcounting（）；//在此处删除
}, 2000)
});
$（“#演示”）.mouseleave（函数（）{
清除间隔（timerId）；
});
函数startcounting（）{//在此处删除
var数=0；
timerId=setInterval（函数（）{
增量（timerId）；
}, 100);
函数increment（）{//在此处删除
如果（数字>=100）{
数字=0；
清除间隔（timerId）；
}否则{
数字++；
控制台日志（编号）；
}
}
}

演示

请注意，所有相关代码都应该放在问题中，以防JSFIDLE崩溃。如果发生这种情况，你的问题将无法回答。非常感谢你的评论！我是新来的，如果你不告诉我，我永远不会想到这一点。我已经将你答案中的代码嵌入到一个片段中，就像我对问题所做的那样。您可能希望查看和更新它，或者如果您反对我这样做，请回滚。