zoukankan      html  css  js  c++  java
  • 为什么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>
    

      嗯,,完美

  • 相关阅读:
    2.3 节的练习
    2.2 节的练习--Compiler principles, technologys, &tools
    web测试点整理(二) -- 输入框
    web测试点整理 -- 注册/登录
    产品测试的思路
    C语言学习--静态链接库和动态链接库
    C语言学习(四)--操作符
    C语言学习(三)--语句
    C语言学习(二)--数据类型
    C语言学习(一)--基本概念
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/7418575.html
Copyright © 2011-2022 走看看