为什么setinterval和settimeout越点击越快以及响应的解决办法

最新推荐文章于 2023-01-10 16:16:44 发布

辛苦的码农20200609

最新推荐文章于 2023-01-10 16:16:44 发布

阅读量456

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjkj20hb00kj.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

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>

　　嗯，，完美

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么setinterval和settimeout越点击越快以及响应的解决办法

setinterval大家都很了解，但是如果时间长的话，误差也会越来越大，所以我习惯上使用settimeout的递归，闲来没事，写了一个定时器的递归<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/jquery/3.
复制链接

扫一扫