JS实现禁止高频率连续点击的方法【基于ES6语法】


Posted in Javascript onApril 25, 2017

本文实例讲述了JS实现禁止高频率连续点击的方法。分享给大家供大家参考,具体如下:

1、类似react的数据流,点击之后立即设置值为空,当返回值后才可以点击

2、设置定时器,每次进入之前先清空掉定时器,然后开启定时器

<main>
  <div id="me" style="width: 100px;height: 50px; margin: 5rem auto;background: blue;color: #fff">点我</div>
</main>
<script>
  let c =null;
  let dom = document.querySelector('#me');
  dom.addEventListener('click',function(){
    clearTimeout(c);
    c = setTimeout(function(){
      console.log(2000)
    },1000)
  },false)
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
五段实用的js高级技巧
Dec 20 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
详解js的六大数据类型
Dec 27 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
json的结构与遍历方法实例分析
Apr 25 #Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
用vue和node写的简易购物车实现
Apr 25 #Javascript
ES6数组的扩展详解
Apr 25 #Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 #Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 #Javascript
Javascript中click与blur事件的顺序详析
Apr 25 #Javascript
You might like
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue写一个组件
2018/04/09 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
python对象及面向对象技术详解
2016/07/19 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
美国轮胎网站:Priority Tire
2018/11/28 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
银行求职信个人范文
2013/12/16 职场文书
写自荐信要注意什么
2013/12/26 职场文书
市场营销调查计划书
2014/05/02 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
高校教师个人总结
2015/02/10 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript