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代码
Jan 01 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
详解JS中的attribute属性
Apr 25 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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制作静态网站的模板框架(三)
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript判断office版本示例
2014/04/11 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
React实现todolist功能
2020/12/28 Javascript
Python三元运算实现方法
2015/01/12 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python字典遍历操作实例小结
2019/03/05 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
简单分析python的类变量、实例变量
2019/08/23 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
交通事故检查书范文
2014/01/30 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
python四种出行路线规划的实现
2021/06/23 Python
MongoDB使用场景总结
2022/02/24 MongoDB