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>

　　嗯，，完美

为什么setinterval和settimeout越点击越快以及响应的解决办法的更多相关文章

  1. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  2. IOS的Safari浏览器中，点击事件失效的原理及解决办法

    这里做了事件委托,简单区分一下[目标元素]和[代理元素],为后续论述理解做铺垫. [目标元素]:实际希望点击的元素,可以是任意标签. [代理元素]:代替[目标元素]触发点击事件的元素,有可能是目标元素 ...

  3. swfupload在chrome中点击上传图片按钮无反应的解决办法

    chrome 22.0.XXXXX dev版上传图片按钮点击无反应原因:是GOOGLE的内建Flash PPAPI外挂所导致的. 问题原因: 由于Google浏览器(Chrome),在最新测试版22. ...

  4. [Discuz!] Discuz X1.5点击“发帖”出现XML代码的解决办法！

    使用的是Discuz X1.5程序,不知什么原因,今天突然出现了大问题,就是在点击“发帖”的时候,原来正常显示的网页竟然变成了XML代码!经过一番查找资料,也未能找到是什么原因导致的,只是找到了解决办 ...

  5. button快速点击造成多次相应的解决办法

    UIButton+touch.h #import <UIKit/UIKit.h> #define defaultInterval 3 //默认时间间隔 @interface UIButto ...

  6. popupWindow使用timePicker时点击出现闪屏问题的解决办法

    记录一下刚解决的新鲜bug,噔噔噔噔: 首先说明,我并不知道到底是什么原理导致和解决的问题 总之就是,我在使用popupWindow时的弹出方法使用的是popupWindow.showAsDropDo ...

  7. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  8. “Bootstrap做的响应式菜单在iPhone上点击不了二级菜单“的解决办法！

    只需把把点击的a(被点击的)变成button即可.

  9. 移动端点击返回时强制页面刷新解决办法(pageshow)

    在做移动端项目的时候经常遇到这样一个功能比如: 返回后页面不刷新,一些失效的信息依然显示在页面上.这个问题在iphone手机上会出现,在Android手机上返回时会自动刷新(由于手机机器种类不多,无法 ...

随机推荐

  1. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  2. uboot中env实现

    通过搜素比对字符串保存env. 所有的env都保存在一起,每个环境变量字段都以“\0\0”结束,最后一个命令字段以“\0\0\0”结束. 每次uboot启动时,先读出环境变量.当设置新数据时,遍历整个 ...

  3. 【译】Linux概念架构的理解

    声明:本文转载,原路径地址:http://www.jianshu.com/p/c5ae8f061cfe 摘要 Linux kernel成功的两个原因:(1)灵活的架构设计使得大量的志愿开发者能够很容易 ...

  4. 浅谈Log4j和Log4j2的区别

    相信很多程序猿朋友对log4j都很熟悉,log4j可以说是陪伴了绝大多数的朋友开启的编程.我不知道log4j之前是用什么,至少在我的生涯中,是log4j带我开启的日志时代. log4j是Apache的 ...

  5. json数据 提示框flash.now[:notice] flash.now[:alert]

    实现json.做出提示框 1.在controller中使用flash.now[:alert] = "str"方法来做print def topodata #@vnic = Vnic ...

  6. jquery 自动完成 Autocomplete插件汇总

    1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...

  7. LoadRunner性能测试基础知识问答

    Q1:什么是负载测试?什么是性能测试? A1:负载测试是通过逐步增加系统负载,测试系统性能的变化,并最终确定在满足性能指标的情况下,系统所能承受的最大负载量的测试,例如,访问一个页面的响应时间规定不超 ...

  8. e682. 获得打印页的尺寸

    Note that (0, 0) of the Graphics object is at the top-left of the actual page, which is outside the ...

  9. VS2010 快捷键设置，快速编码1

    全屏:Shift+Alt+Enter注释选定内容:Ctrl+E+C/Crtr+E+U代码格式化:ctrl+E+F VS2008 使用小技巧——快捷键1. 怎样调整代码排版的格式?选择:编辑—>高 ...

  10. JAVA中String字符串比较equals()和equalsIgnoreCase()的区别

    标签: equals和equalsIgnoreC 2012-11-11 16:03 65644人阅读 评论(0) 收藏 举报  分类: JAVA(3)  1.使用equals( )方法比较两个字符串是 ...