写了一个简单的番茄时钟。setInterval所执行的函数是比较耗时的动作，setInterval仍然会按照原计划安排调用那个函数，而不考虑之前的任何阻塞，这样随着时间的推移，队列中等待执行的函数就会越来越多。当用户点击按钮的时候，会看见数字不断跳动，实际上就是多个函数同时作用在计时器上，所以计时器上的数字跳动会有异常，网上的大多是通过将setInterval 换为 setTimeout来防止后续任务不断堆积。但实际上也可以直接增加一个判断函数对点击事件进行处理。防止多次点击造成函数堆积。代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>番茄时钟</title>
<style type="text/css">
input {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 150%;
}
span {
position: absolute;
top: 50%;
left: 65%;
transform: translate(-50%,-50%);
color: red;
font-size: 200%;
}
</style>
<script type="text/javascript">
var Switch = 1;
function setOverTime(Num) {
if (!document.getElementById) return false;
if (!document.getElementById('datetime')) return false;
var hehe = parseInt(Num * 60);
var dateTime = document.getElementById('datetime');
//单次点击
onclick = function() {
if(Switch){
dateTime.innerHTML = parseInt(Num / 60) + ':' +(Num % 60 + '0');
function overTime(Num) {
var mins = parseInt(Num / 60);
var secs = Num % 60;
if (mins > 0 && secs >= 10) {
dateTime.innerHTML = mins + ':' + secs;
}else if (mins > 0 && secs < 10 && secs >= 0) {
dateTime.innerHTML = mins + ':' + '0' + secs;
}
if (!Num>0) {
clearInterval(saveTime);
//location.replace(location.href);
}
}
var saveTime = setInterval(function () {
Num--;
overTime(Num);
},1000); //循环执行，每隔一秒执行一次函数
console.log("123")
Switch = 0;
}
}
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时" onClick="setOverTime(25 * 60)">
<span type="text" id="datetime"></span>
</input>
</form>
</body>
</html>