为什么setinterval和settimeout越点击越快以及响应的解决办法
为什么setinterval和settimeout越点击越快以及响应的解决办法
蓓蕾心晴
发布于 2019-09-26 10:54:58
发布于 2019-09-26 10:54:58
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读