JavaScript计时功能：解决点击Begin后Stop按钮无法二次停止计时的问题

嗨，这个问题很好解决，我帮你捋清楚问题出在哪以及怎么修复～

问题根源 #

你看哦，页面刚加载的时候，定时器的ID存在了变量i里，第一次点「Stop」，用这个i就能正常关掉定时器。但当你点「Begin」重新开计时的时候，你虽然生成了新的定时器，却没有把新的定时器ID重新赋值给变量i，这时候i还是之前那个已经没用的旧ID，再点「Stop」当然关不掉新的定时器啦！

修复后的完整代码 #

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>setInterval</title>
<script type="text/javascript">
// 初始化定时器ID，页面加载时启动计时
var i = setInterval(clock, 100);

function clock() {
    var time = new Date();
    document.getElementById("clock").value = time;
}

function stop(){
    clearInterval(i);
}

function begin(){
    // 把新的定时器ID赋值给i，这样Stop按钮才能拿到正确的ID去清除
    i = setInterval(clock, 100);
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="stop()" />
<input type="button" value="Begin" onclick="begin()" />
</form>
</body>
</html>

关键修改点 #

• 在begin()函数中，把setInterval的返回值重新赋值给全局变量i，这样每次点击「Begin」生成的新定时器ID都会被存在i里，「Stop」按钮就能正确找到当前要停止的定时器了。
• 额外优化：把setInterval的第一个参数从字符串"clock()"改成直接传函数引用clock，这是更规范的写法，避免了不必要的字符串解析，性能也更好。

内容的提问来源于stack exchange，提问作者richardkile