Question

注意：我查看了有关setInterval / clearInterval的所有问题和答案，但没有任何问题和帮助。不要将其标记为重复。

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

＆＃13;

var	titleCard = document.getElementById("titleCard"),
	red = 255,
	green = 255,
	blue = 255,
	redDir = 1,
	greenDir = -1,
	blueDir = -1,
	on = true,
	colorChange = setInterval(updateCard, 10);

function updateCard() {
	if (red > 255) red = 255;
	if (green > 255) green = 255;
	if (blue > 255) blue = 255;
	if (red < 0) red = 0;
	if (green < 0) green = 0;
	if (blue < 0) blue = 0;
	
	red += redDir;
	green += greenDir;
	blue += blueDir;
	
	if (red >= 255 && green <= 0 && blue <= 0) turnGreen();
	if (red <= 0 && green >= 255 && blue <= 0) turnBlue();
	if (red <= 0 && green <= 0 && blue >= 255) turnRed();
	
	titleCard.style.backgroundColor = "rgb(" + red + "," +  green + "," + blue + ")";
}

function turnRed() {
	redDir = 1;
	greenDir = -1;
	blueDir = -1;
}

function turnGreen() {
	redDir = -1;
	greenDir = 1;
	blueDir = -1;
}

function turnBlue() {
	redDir = -1;
	greenDir = -1;
	blueDir = 1;
}

titleCard.onclick = function() {
	if (on) {
		console.log("Clearing: " + colorChange);
		clearInterval(colorChange);
		on = false;
	} else {
		colorChange = setInterval(updateCard, 10);
		console.log("Set: " + colorChange);
		on = true;
	}
}

＆＃13;

<!DOCTYPE HTML>
<html>
	<head>
		<title>My Website</title>
		<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
		<link rel="apple-touch-icon" href="images/apple_icon.png"/>
		<link rel="apple-touch-icon-precomposed" href="images/apple_icon.png"/>
		<link rel="stylesheet" href="/css/materialize.min.css"/>
		<link rel="stylesheet" href="/css/style.css"/>
		
	</head>
	<body>
		<div class="container">
			<div class="card hoverable">
				<h1 id="titleCard" class="card-content center">My Name</h1>
			</div>
		</div>
		<div class="row">
			<div class="col s4 push-s4">
				<div id="welcomeCard" class="card teal lighten-3">
					<p class="card-content center">Welcome to my website.<br/>Enjoy your stay.</p>
				</div>
			</div>
		</div>
		<div id="background1"></div>
	</body>
	<script src="/js/colorChange.js"></script>
	<script src="/js/changeTitle.js"></script>
	<script src="/js/style.js"></script>
</html>

＆＃13;

以下是我的控制台中点击5次元素的示例：

＆＃13;

colorChange.js:50 Clearing: 61
colorChange.js:55 Set: 62
colorChange.js:50 Clearing: 62
colorChange.js:55 Set: 63
colorChange.js:50 Clearing: 63

＆＃13;

这证明clearInterval调用正在清除正确的ID。为什么颜色仍在变化？

编辑：有趣的是，上面的片段实际上运行正常。但是，在我的网页中，它没有。我比以前更困惑。

编辑2：我添加了完整的HTML页面。

编辑3：这是我的其他JS文件，也许那里有问题？

changeTitle.js

＆＃13;

var	titleCard = document.getElementById("titleCard");
	currentTime = new Date().getHours() + ":" + new Date().getMinutes(),
	today = new Date().getMonth() + 1 + "/" + new Date().getDate(),
	colorChange = setInterval(updateCard, 10);

function updateCard() {
	currentTime = new Date().getHours() + ":" + new Date().getMinutes();
	if (currentTime == "11:11" || currentTime == "23:11") changeTitle("Make a wish!", 1);
	else if (today == "2/13") changeTitle("Happy birthday to me", 1);
	else if (today == "12/11") changeTitle("Happy birthday, Kayla!", 1);
	else if (today == "3/7") changeTitle("Happy birthday, Nathan!", 1);
	else if (today == "1/1") changeTitle("Happy birthday, Mom!", 1);
	else if (today == "1/29") changeTitle("Happy birthday, Dad!", 1);
	else if (today == "8/3") changeTitle("Happy birthday, Brandon!", 1);
	else if (today == "7/24") changeTitle("Happy birthday, Dustin!", 1);
	else if (today == "11/23") changeTitle("Happy birthday, Branson!", 1);
	else if (today == "11/8") changeTitle("Happy birthday, Jack!", 1);
	else defaultTitle();
}

function changeTitle(body, interval) {
	titleCard.innerHTML = body;
	clearInterval(colorChange);
	colorChange = setInterval(updateCard, interval);
}

function defaultTitle() {
	titleCard.innerHTML = "MY NAME";
	clearInterval(colorChange);
	colorChange = setInterval(updateCard, 10);
}

＆＃13;

style.js

＆＃13;

var background1 = document.getElementById("background1");
background1.style.position = "absolute";
background1.style.backgroundColor = "black";
background1.style.top = 0;
background1.style.left = 0;
background1.style.width = "100%";
background1.style.height = "25%";
background1.style.zIndex = -1;

＆＃13;

这是杀了我

最终编辑：解决，查看@ GregL和@ CodeiSir的答案。

Answer 1

我进入了代码，

这是一个工作示例:(按RUN键）（如果你想知道，当鼠标按钮在同一个物体上升时，onclick会被触发，因此你可能没有imediat反应，使用onmousedown代替看imediat反应）

var titleCard = document.getElementById("titleCard"),
  red = 255,
  green = 255,
  blue = 255,
  redDir = 1,
  greenDir = -1,
  blueDir = -1,
  on = true,
  colorChange = setInterval(updateCard, 10);

function updateCard() {
  if (red > 255) red = 255;
  if (green > 255) green = 255;
  if (blue > 255) blue = 255;
  if (red < 0) red = 0;
  if (green < 0) green = 0;
  if (blue < 0) blue = 0;

  red += redDir;
  green += greenDir;
  blue += blueDir;

  if (red >= 255 && green <= 0 && blue <= 0) turnGreen();
  if (red <= 0 && green >= 255 && blue <= 0) turnBlue();
  if (red <= 0 && green <= 0 && blue >= 255) turnRed();

  titleCard.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
}

function turnRed() {
  redDir = 1;
  greenDir = -1;
  blueDir = -1;
}

function turnGreen() {
  redDir = -1;
  greenDir = 1;
  blueDir = -1;
}

function turnBlue() {
  redDir = -1;
  greenDir = -1;
  blueDir = 1;
}

titleCard.onclick = function() {
  if (on) {
    console.log("Clearing: " + colorChange);
    clearInterval(colorChange);
    on = false;
  } else {
    colorChange = setInterval(updateCard, 10);
    console.log("Set: " + colorChange);
    on = true;
  }
}

<div id="titleCard" style="height: 100px; width: 100px"></div>

修改这是问题所在：您在changeTitle.js中再次使用相同的变量：

var titleCard = document.getElementById("titleCard"); currentTime = new Date().getHours() + ":" + new Date().getMinutes(), today = new Date().getMonth() + 1 + "/" + new Date().getDate(), colorChange = setInterval(updateCard, 10);

你必须为每个文件使用不同的变量

Answer 2

问题在于您在多个JS文件中重新定义了许多关键变量和函数，因此后面的值将覆盖以前的值并导致原始值“丢失”。

这是因为在Javascript中，只有函数创建一个新的作用域，因此任何JS文件中函数之外的东西都将在全局名称空间中。

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

这是forked Plunkr，它有效。

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

(function () {

并将此行放在每个JS文件的底部：

})();

编辑：信用必须转到@CodeiSir，他发现问题是在两个JS文件中重用变量和函数名称。

JavaScript - setInterval函数：interval不会清除

2 个答案: