(节流)js防止重复频繁点击或者点击过快方法
1.方法一:用定时器定时,没跑完定时器,点击按钮无效
<script>
var isClick = true;
$("button").on("click",function(){
if(isClick) {
isClick = false;
//事件
console.log('我被点击了');
//定时器
setTimeout(function() {
isClick = true;
}, 1000);//一秒内不能重复点击
}else{
console.log('请勿过快点击');
}
});
</script>
2.方法二:用两次时间差决定点击是否有效——参考地址如下:
https://www.cnblogs.com/clear93/p/8086374.html
var lastClick;
lockClick(){
var nowClick = new Date();
if (lastClick === undefined) {
lastClick = nowClick;
return true;
} else {
if (Math.round((nowClick.getTime() - lastClick.getTime())) > 500) {
lastClick = nowClick;
return true;
}
else {
lastClick = nowClick;
return false
}
}
} this.on('click',()=>{
if (this.lockClick()) {
//你的函数代码
}
})
三.方法三:比如每次点击的时候给按钮一个500毫秒的遮罩闪现来遮盖按钮
(节流)js防止重复频繁点击或者点击过快方法的更多相关文章
- JS变量重复声明以及忽略var 声明的问题及其背后的原理
腾讯的一个笔试题,先看一下 var a = 100; function fn() { alert(a); //undefined var a = 200; alert(a); //200 } fn() ...
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
- 【repost】 JS变量重复声明以及忽略var 声明的问题及其背后的原理
JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数.在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当 ...
- js 去掉重复数组
js去掉重复数组 重点一:字符串转数组 strArr.join(',') 重点二:做循环数组删除的时候,每次循环就把color[i] 去对比i之前所有数组color组合起来的字符串 比如 : i=1 ...
- js遍历添加栏目类添加css 再点击其它删除css
//js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).cli ...
- webdriver js点击无法点击的元素
原文地址https://blog.csdn.net/galen2016/article/details/56847545 [WebDriver]调用JavaScript 一.WebDriver 提供了 ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...
- JS 防止重复提交
JS 防止重复提交表单 利用flag自定义设置,缺点就是当页面有很多类似操作时,每次需要一个 方法二: var newtime = 0; function sub(){ var Today = new ...
- 【转】第7篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:全自动注册与反射方法分析
作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
随机推荐
- Springboot+POI实现excel生成下载进阶版(单元格合并,多Sheet,各种样式处理)
上周五来了新的需求,基本上我写的还款那一系列流程不要了(我好悲伤,当时写了很久的,逻辑复杂的写的我很骄傲),新的变成如上所示(仅仅一部分),勾选几笔后生成一个excel表格,不同的融资编号所引发的那堆 ...
- Web服务器通信原理
Web服务器通信原理 1.区分系统 2.DOS系统 3.IP地址 4.域名.DNS 5.端口 6.HTTP协议 7.Web容器 8.整个流程 一.区分系统 主要三个系统Windows.Linux.Ma ...
- 3DCAT携手华为,打造XR虚拟仿真实训实时云渲染解决方案
2023年5月8日-9日,以 ''因聚而生 众志有为'' 为主题的 ''华为中国合作伙伴大会2023'' 在深圳国际会展中心隆重举行.本次大会汇聚了ICT产业界的广大新老伙伴朋友,共同探讨数字化转型的 ...
- 记录--记录用前端代替后端生成zip的过程,速度快了 57 倍!!!
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 业务场景: 产品有个功能是设置主题.类似手机自动切换壁纸,以及其他功能颜色,icon,字体等. 管理员需要在后端管理系统多次下载不同主题, ...
- 记录--`ElementUI` 中的奇技淫巧
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在ElementUI的世界中,不仅有基础的组件和功能,还有一些让你眼前一亮.*得不能再*的高级技巧和窍门.本文将揭示这些技巧,让你在前端开 ...
- 记录--手把手教你,用electron实现截图软件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 背景 因为我们日常开发项目的时候,需要和同事对接api和文档还有UI图,所以有时候要同时打开多个窗口,并在多个窗口中切换,来选择自己要的信 ...
- SpringBoot RestTemplate 上传文件
@Test public void testUpload() throws Exception { String url = "http://127.0.0.1/file/upload&qu ...
- KingbaseES 垃圾回收原理以及如何预防膨胀更新
背景 KingbaseESV8R6支持snapshot too old 那么实际工作中,经常看到表又膨胀了,那么我们讨论一下导致对象膨胀的常见原因有哪些呢? 未开启autovacuum,对于未开启au ...
- 如何在Java中读取超过内存大小的文件
读取文件内容,然后进行处理,在Java中我们通常利用 Files 类中的方法,将可以文件内容加载到内存,并流顺利地进行处理.但是,在一些场景下,我们需要处理的文件可能比我们机器所拥有的内存要大.此时, ...
- 【已解决】Hadoop_03 解决Hadoop输入jps没有NameNode的问题
问题描述: 解决方案: 1.先运行 stop-all.sh 2.格式化 namdenode(在这之前要先删除原目录,即core-site.xml下配置的<name>hadoop.tmp.d ...