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. win8.1 64位安装oracle10g客户端心得

    方法同win7 64位安装方法(http://www.cnblogs.com/winkey4986/p/3683568.html)下载Oracle 10g的客户端程序,文件名是 10201_clien ...

  2. Tomcat:基础安装与使用教程

    Tomcat:基础安装与使用教程 背景 此文记录了 Tomcat 的基本使用方法,主要为了强化记忆. 安装步骤 第一步:下载和安装 Java 下载地址:http://www.oracle.com/te ...

  3. SecureCRT 用ssh key登录配置方法

    服务器端配置 OS: Debian-6.0.5 复制代码 代码如下: #apt-get install ssh 安装ssh服务 编辑/etc/ssh/sshd_config配置文件 复制代码 代码如下 ...

  4. EcmaScript对象克隆之谜

    先谈谈深拷贝 如何在js中获得一个克隆对象,可以说是喜闻乐见的话题了.相信大家都了解引用类型与基本类型,也都知道有种叫做深拷贝的东西,传说深拷贝可以获得一个克隆对象!那么像我这样的萌新自然就去学习了一 ...

  5. mybatis 一对多关系

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  6. Workerman

    What is it Workerman is a library for event-driven programming in PHP. It has a huge number of featu ...

  7. IE和Firefox之间的JavaScript差异

    这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的几 个方面. 1. CSS “float” 属性 获取给定对象的特定 CSS 属 ...

  8. Windoows窗口程序六

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  9. spark学习系列

    转自: http://www.cnblogs.com/magj2006/p/4316264.html spark 系列文章汇总 源码导读 spark 源码导读1 从spark启动脚本开始 spark ...

  10. hive执行流程分析

    转自:http://blog.csdn.net/gexiaobaohelloworld/article/details/7719163 入口:bin/hive脚本中,环境检查后执行ext中的cli.s ...