为什么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>
嗯，，完美
为什么setinterval和settimeout越点击越快以及响应的解决办法的更多相关文章
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- IOS的Safari浏览器中，点击事件失效的原理及解决办法
这里做了事件委托,简单区分一下[目标元素]和[代理元素],为后续论述理解做铺垫. [目标元素]:实际希望点击的元素,可以是任意标签. [代理元素]:代替[目标元素]触发点击事件的元素,有可能是目标元素 ...
- swfupload在chrome中点击上传图片按钮无反应的解决办法
chrome 22.0.XXXXX dev版上传图片按钮点击无反应原因:是GOOGLE的内建Flash PPAPI外挂所导致的. 问题原因: 由于Google浏览器(Chrome),在最新测试版22. ...
- [Discuz!] Discuz X1.5点击“发帖”出现XML代码的解决办法！
使用的是Discuz X1.5程序,不知什么原因,今天突然出现了大问题,就是在点击“发帖”的时候,原来正常显示的网页竟然变成了XML代码!经过一番查找资料,也未能找到是什么原因导致的,只是找到了解决办 ...
- button快速点击造成多次相应的解决办法
UIButton+touch.h #import <UIKit/UIKit.h> #define defaultInterval 3 //默认时间间隔 @interface UIButto ...
- popupWindow使用timePicker时点击出现闪屏问题的解决办法
记录一下刚解决的新鲜bug,噔噔噔噔: 首先说明,我并不知道到底是什么原理导致和解决的问题 总之就是,我在使用popupWindow时的弹出方法使用的是popupWindow.showAsDropDo ...
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- “Bootstrap做的响应式菜单在iPhone上点击不了二级菜单“的解决办法！
只需把把点击的a(被点击的)变成button即可.
- 移动端点击返回时强制页面刷新解决办法(pageshow)
在做移动端项目的时候经常遇到这样一个功能比如: 返回后页面不刷新,一些失效的信息依然显示在页面上.这个问题在iphone手机上会出现,在Android手机上返回时会自动刷新(由于手机机器种类不多,无法 ...
随机推荐
- Java应用程序项目的打包与发行
Java应用程序项目的打包与发行 这里主要是讲解一下怎样将 Java程序打包成独立运行的exe程序包,以下这种方法应该是最佳的解决方案了.NetDuke的EXE 程序包了是使用这种方案制作的.在 ...
- Java学习理解路线图
信息来自知乎网友 学习截图:来自开源力量
- VMware 14 Pro 安装 CentOS 7
今年准备好好学习一下.NET CORE了,那也是得学习Linux.然后又得学习更多,咬着牙干吧... 1.Vmware虚拟机安装 在windows平台,首先咱们得先安装Vmware虚拟机,步骤省略,一 ...
- larave框架的安装
(1)中文官网:http://www.golaravel.com/ (2)composer下载与安装 1:composer网址:getcomposer.org 2:windows下载Composer- ...
- 验证url 地址是否是图片
由于正则不是很熟悉 所以面对这样的目前只能采取两步走 一 判断url地址是否是正确的http 二判断后缀是否是图片 格式 /驗證URL function validUrl(strUrl){ strUr ...
- 231个javascript特效分享
1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后,产生该文件Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件 <i ...
- 使用特殊构造的5GB文件测试Win2012Dedup功能
WinServer2012一个崭新的功能就是支持重复数据删除功能.为了测试这个功能的情况,特别构造了一个特殊的5GB文件用于此次测试.惯例,先说下测试环境的搭建1 使用ESXi5上的版本8的VM,安装 ...
- 《FPGA全程进阶---实战演练》第四章之Quartus II使用技巧
技巧1:“新”技能 hierarchies警告寻找 在编译之后,警告中“hierarchies”这个单词大家估计都很熟悉了,一看到这个警告,基本上就是例化时出现的问题.一般例化时,要是哪个连线没引出, ...
- 《FPGA全程进阶---实战演练》第三章之PCB设计之去耦电容
1.关于去耦电容为何需要就近摆放? 大多数资料有提到过,去耦电容就近放置,是从减小回路电感的角度去谈及摆放问题,其实还有一个原则就是去耦半径的问题,如果电容离着芯片位置较远,超过去耦半径,会起不到去耦 ...
- C语言中预处理器的相关知识：
预处理过程时,会做以下事情或着更多: 将所有的#define删除,并且展开所有的宏定义: 处理所有条件编译指令,如#if,#ifdef等: 处理#include预编译指令,将被包含的文件插入到该预编译 ...