(节流)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 ...
随机推荐
- APISIX的安装和简单使用
APISIX 是一个云原生.高性能.可扩展的微服务 API 网关. 它是基于 Nginx 和 etcd 来实现,和传统 API 网关相比,APISIX 具备动态路由和插件热加载,特别适合微服务体系下的 ...
- [VueJsDev] 其他知识 - 单词本
[VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html 单词本z 这里的单词就是很随性的记忆,来源有生活中能见到的, ...
- Obsidian 0.15.9 知识笔记 使用说明
我感觉这个软件是一个非常好用的软件,经过初步体验. 全局搜索快捷键 Ctrl + Shift + F 打开快速切换快捷键 Ctrl + O 添加标签 #测试标签 反向链接 Obsidian支持反向链接 ...
- inputNextFocus vue - js 跳转 下一个 tab
inputNextFocus vue - js 跳转 下一个 tab <template> <Input v-model="val1" ref="inp ...
- ECharts 中国地图 vue
<template> <div> <div id="china_map_box"> <div id="china_map&quo ...
- cpprestsdk有bug.
好不容易将cpprestsdk移植到MinGW,并编译通过,出于安全还是先将samples还有tests测试一下是否正常. 用samples/blackjack一测试就出现奇葩现象,server一端会 ...
- 记一次由虚假唤醒产生的bug
记一次由虚假唤醒产生的bug 用int a代表产品数量最少0最多10,有两个生产者,三个消费者,用多线程和条件变量模拟生产消费过程: #include <sys/types.h> #inc ...
- Android中同步类Mutex(AutoMutex)与Condition
在Android中,封装的同步类主要有Mutex(AutoMutex)与Condition. 这两个类在android中被大量的使用,这也说明这两个类是非常重要的. 一.Mutex(AutoMutex ...
- Performance Improvements in .NET 8 -- JIT部分翻译
相关视频 动态PGO 基准测试设置 在本文中,我包括微基准测试以突出讨论的各个方面.其中大部分基准测试都是使用BenchmarkDotNet v0.13.8实现的,除非另有说明,否则每个基准测试都有一 ...
- C++ malloc、calloc、realloc
1. malloc 函数原型: extern void *malloc(unsigned int num_bytes); 如果分配成功:则返回指向被分配内存空间的指针,不然返回指针NULL .同时,当 ...