奇数'预期;'我找不到的错误答案

【问题标题】：Odd 'expected ;' error that I can't find奇数'预期;'我找不到的错误
【发布时间】：2017-01-24 14:02:16
【问题描述】：

我之前在这里发布过一个完全不同的问题，但现在我的时钟（在逐步通过时，它似乎工作得非常好）返回一个 ';预期的'错误，大约每 500 毫秒我会根据我的变量“t”猜测。然后它在 8-12 次迭代后停止。表示错误在 html 文件的第 3 行第 1 列。

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    var t = setInterval(startTime(), 500);
	return h + ":" + m + ":" + s;
    
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

.headtitle {
	color:red;
	font-family: "Courier New", Courier, monospace;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border: 5px solid #00f;
	padding: 10px;
}
.subtitle{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.25rem
}
a.firstlink{
	word-spacing: 30px;
}
a:visited{
	color:lightblue
}
body{
	background-image: url("http://i.kinja-img.com/gawker-media/image/upload/a942qcqwrcmveiq37zli.png");
	background-repeat:repeat;
	color: white;
}
.list{
	display: inline;
}
.list li{
	display: inline;
	padding-left: 1.5rem;
}
.button{
	float:right;
	border: 1px solid #f00;
	padding: 5px
}
.button:active{
	position: relative;
	top: 2px;
	left: 2px;
}
.JavascriptButton{
	float:right;
}
.clickText{
	cursor:pointer;
}

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Website task.css">
		<script type="text/javascript" src="new 1.js"></script>
		<script type="text/javascript">
			function openFunction()
			{
				window.open('Website Task.html', '_blank');
			}
			function showTime()
			{
				document.getElementById("currentTime").innerHTML = "The time is now " + startTime();
				t = setInterval(startTime(), 500);
			}
		</script>
		<title>Javascript page</title>
	</head>
	<body>
		<div class="header">
			<h1 class="headtitle">Javascript demo page</h1>
			<p class="subtitle">This page is for demonstrating functions in Javascript in particular, as well as jQuery.</p>
			<p id="currentTime"></p>
			<button id="timeButton" onclick="showTime()" onclick="removeElement('header','timeButton');">Click here to show the time</button>
			<p></p>
			<a class="clickText" onclick="openFunction()">Click this text to return to the previous page in a new window</a>
			<button class="JavascriptButton" onclick="window.location='Website Task.html';">Previous page</button>
		</div>
	</body>
</html>

【问题讨论】：

一些需要注意的事情...您通过立即调用回调函数而不是传递它来调用setInterval。 startTime() 函数递归调用自身。一旦你修复了setInterval 调用，这将会以指数方式增加运行间隔的数量。
我添加该部分的唯一原因是因为 setInteral 函数似乎一开始就不起作用。实际上，删除它似乎可以修复错误，但时钟仍然冻结。
我猜var t = setInterval(startTime(), 500); 会破坏代码。不是分号，而是带区间的无限递归
我在运行时间时收到了Uncaught RangeError: Maximum call stack size exceeded。
@Zeratops 那是因为无限递归。

标签： javascript html css syntax

【解决方案1】：

您只需将startTime 和showTime 更改为一个setInterval。

你也可以直接将函数交给setInteval而不调用它。

var t = setInterval(startTime, 500);
//                          ^^^ no parenthesis

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);       
    document.getElementById("currentTime").innerHTML = "The time is now " + h + ":" + m + ":" + s; // add this here        
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

.headtitle {
	color:red;
	font-family: "Courier New", Courier, monospace;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border: 5px solid #00f;
	padding: 10px;
}
.subtitle{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.25rem
}
a.firstlink{
	word-spacing: 30px;
}
a:visited{
	color:lightblue
}
body{
	background-image: url("http://i.kinja-img.com/gawker-media/image/upload/a942qcqwrcmveiq37zli.png");
	background-repeat:repeat;
	color: white;
}
.list{
	display: inline;
}
.list li{
	display: inline;
	padding-left: 1.5rem;
}
.button{
	float:right;
	border: 1px solid #f00;
	padding: 5px
}
.button:active{
	position: relative;
	top: 2px;
	left: 2px;
}
.JavascriptButton{
	float:right;
}
.clickText{
	cursor:pointer;
}

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Website task.css">
		<script type="text/javascript" src="new 1.js"></script>
		<script type="text/javascript">
			function openFunction()
			{
				window.open('Website Task.html', '_blank');
			}
			function showTime()
			{
				var t = setInterval(startTime, 500);
				startTime();
			}
		</script>
		<title>Javascript page</title>
	</head>
	<body>
		<div class="header">
			<h1 class="headtitle">Javascript demo page</h1>
			<p class="subtitle">This page is for demonstrating functions in Javascript in particular, as well as jQuery.</p>
			<p id="currentTime"></p>
			<button id="timeButton" onclick="showTime()" onclick="removeElement('header','timeButton');">Click here to show the time</button>
			<p></p>
			<a class="clickText" onclick="openFunction()">Click this text to return to the previous page in a new window</a>
			<button class="JavascriptButton" onclick="window.location='Website Task.html';">Previous page</button>
		</div>
	</body>
</html>

【讨论】：

【解决方案2】：

你有盈余；在你的 if 语句之后。制作它：

function checkTime(i) {
if (i < 10) {i = "0" + i}
return i;
}

此外，您遇到的错误是已超出最大调用堆栈大小。这是因为你的函数 setTime() 正在调用自己

【讨论】：

这不会导致错误。这只是一个 JavaScript “空语句”
嗯，分号应该在块内。
似乎解决不了任何问题。时钟仍然冻结，错误仍然出现。
@LittleSanti：分号是输入、输出还是不存在都无关紧要。它不会改变任何东西。

【解决方案3】：

问题是当你做setInterval(startTime(), 500);时，它实际上是setInterval("04:43:00", 500);。 setInterval 期望第一个参数为函数。

样本

function startTime(){
  return new Date().toLocaleTimeString();
}

setTimeout(startTime(), 500)

【讨论】：