为什么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.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>