JavaScript-setInterval函数：interval-won'；不清楚

注意：我已经查看了所有与setInterval/clearInterval相关的问题和答案，没有一个对我有任何帮助。不要将此标记为重复

我有一个HTML页面，其中有一个元素的背景颜色会发生变化（从红色到绿色再到蓝色等等）。单击时，颜色应停止更改。我使用setInterval来运行updateCard（）函数，该函数用于检查颜色当前是否正在更改，并清除间隔或重置间隔。单击时，它不会停止更改颜色。我添加了console.log检查以查看间隔ID是否在更改，我发现它在更改（我的函数名为update），所以我修复了这个问题。间隔ID现在在清除时与定义时相同。这是嵌入在HTML中的colorChange.js文件

var titleCard=document.getElementById（“titleCard”），
红色=255，
绿色=255，
蓝色=255，
redDir=1，
greenDir=-1，
blueDir=-1，
on=true，
colorChange=setInterval（updateCard，10）；
函数updateCard（）{
如果（红色>255）红色=255；
如果（绿色>255）绿色=255；
如果（蓝色>255）蓝色=255；
如果（红色<0）红色=0；
如果（绿色<0）绿色=0；
如果（蓝色<0）蓝色=0；
红色+=红色；
绿色+=绿色目录；
blue+=blueDir；
如果（红色>=255&&green我通过代码

下面是一个工作示例：（按RUN）（如果您想知道，当鼠标按钮向上移动到它向下移动的同一对象上时，
onclick
被触发，因此您可能没有imediat反应，请使用
onmousedown
查看imediat反应）


var titleCard=document.getElementById（“titleCard”），
红色=255，
绿色=255，
蓝色=255，
redDir=1，
greenDir=-1，
blueDir=-1，
on=true，
colorChange=setInterval（updateCard，10）；
函数updateCard（）{
如果（红色>255）红色=255；
如果（绿色>255）绿色=255；
如果（蓝色>255）蓝色=255；
如果（红色<0）红色=0；
如果（绿色<0）绿色=0；
如果（蓝色<0）蓝色=0；
红色+=红色；
绿色+=绿色目录；
blue+=blueDir；
如果（红色>=255&&green问题在于您正在多个JS文件中重新定义许多关键变量和函数，因此后一个值将覆盖前一个值，并导致原始值“丢失”

这是因为在Javascript中，只有函数才能创建新的作用域，因此任何JS文件中函数之外的内容都将位于全局命名空间中

但是，您可以使用一种称为（通常发音为“iffy”）的技术来利用函数创建新的命名范围这一事实，从而将每个代码文件与其他代码文件隔离开来，并允许一切正常工作

这是一个有效的解决方案

核心更改是将这一行添加到两个JS文件的顶部：

(function () {

这一行位于每个JS文件的底部：

})();

编辑：必须归功于@CodeiSir，他发现问题在于在两个JS文件中重复使用变量和函数名。
我没有看到任何东西在运行代码段。@frontend\u dev我在代码段中添加了我的HTML。您使用的浏览器是什么？仅供参考-代码段在Firefox中可以正常工作第一个代码段在Chrome中对我来说可以正常工作。您可以详细介绍一下吗你在做什么，发生了什么，以及你希望看到什么？看看我的代码片段，它也很有效。我将添加我的完整HTML，看看它是否存在。编辑后，@CodeiSir似乎确实发现了问题：重新分配到全局
colorChange
变量，这意味着间隔的ID从第一个JSF开始ile已丢失，无法取消。我在changeTitle.js中将其更改为titleCard2，但它不起作用。等等！我是否也需要更改颜色更改？关键变量是
colorChange
，因为只有在返回带有“exported”的对象时，您才能将其用于两个不同的间隔是的，这基本上就是所谓的。