setinterval大家都很了解，但是如果时间长的话，误差也会越来越大，所以我习惯上使用settimeout的递归，闲来没事，写了一个定时器的递归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<button>点击</button>
</body>
<script>
$(function () {
var num = 0;
var end = "";
$("button").on("click", function () {
function result() {
end = setTimeout(function() {
num++;
$("div").text(num);
result()
}, 1000);
}
result();
})
})
</script>
</html>
嗯，，看似很完美，有一个很明显的bug，那就是在页面上，越点击，，它跑的越快，并没有依照1000毫秒的时间进行间隔执行，这是因为，，每点击一次，，settimeout就注册一次，所以会越来越快，，解决的思路就是每次点击的时候进行定时器的清除，，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<button>点击</button>
</body>
<script>
$(function () {
var num = 0;
var end = "";
$("button").on("click", function () {
clearTimeout(end);
function result() {
end = setTimeout(function() {
num++;
$("div").text(num);
result()
}, 1000);
}
result();
})
})
</script>
</html>
嗯，，完美