(节流)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 ...
随机推荐
- CSS Navigation - vscode 插件 - vue css 跳转
CSS Navigation - vscode 插件 - vue css 跳转
- Kotlin学习快速入门(8)—— 委托
原文地址:Kotlin学习快速入门(8)-- 属性委托 - Stars-One的杂货小窝 委托其实是一种设计模式,但Kotlin把此特性编写进了语法中,可以方便开发者快速使用 委托对应的关键字是by ...
- TornadoFx的EventBus使用
原文地址:TornadoFx中的EventBus使用 | Stars-One的杂货小窝 这里默认各位都清楚EventBus的具体作用,稍微有点短,主要国家没有啥好补充的吧 1.定义事件 //接收事件首 ...
- day02-SpringMVC映射请求数据
SpringMVC映射请求数据 1.获取参数值 在开发中,如何获取到 http://xxx/url?参数名1=参数值1&参数名2=参数值2 中的参数? 之前的案例中我们知道:提交的url的参数 ...
- 不想dto套dto可以这样写
之前都是要新建个dto文件的,偶然看到别人这样写,简单记录一下 @Data public class GdtDailyBalanceContent { List<GdtDailyBalanceR ...
- 06_Qt开发基础
.pro文件的配置 跨平台配置 之前我们分别在Windows.Mac环境的Qt项目中集成了FFmpeg. 可以发现在.pro文件的配置中,FFmpeg库在Mac.Windows上的位置是有所差异的.这 ...
- Python配置文件使用教程
在 Python 应用程序开发过程中,配置文件扮演着重要的角色.配置文件可以用来存储应用程序的各种设置.选项和参数,使得程序更加灵活和可配置.本文将介绍 Python 中如何使用配置文件,并提供一些常 ...
- 记录--关于 HTML5 LocalStorage 的 5 个不为人知的事实
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 LocalStorage 是HTML5中一个方便使用的 API,它为 Web 开发人员 提供了一个易于使用的5MB的存储空间.使用 Loc ...
- 一文搞懂idea中的根目录和路径(以Mybatis为例)
一文搞懂idea中的根目录和路径(以Mybatis为例) 在 IntelliJ IDEA 中,项目结构和组织比较灵活,允许用户根据项目需求进行定制. 1.根目录概念: 1.1 项目根目录(Projec ...
- AntSK 0.2.3 版本更新:轻松集成 AI 本地离线模型
大家好,今天和大家分享 AntSK 知识库/智能体项目的最新进展. AntSK 是一个基于 .Net 8.Blazor 及 SemanticKernel 开发的 AI 项目,旨在为开发者提供一个强大的 ...