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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
原生js实现回复评论功能
Jan 18 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
js实现旋转木马轮播图效果
Jan 10 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
?繁体转换的class
2006/10/09 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php目录拷贝实现方法
2015/07/10 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
javascript深入理解js闭包
2010/07/03 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
模具专业毕业推荐信
2014/03/08 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
台风停课通知
2015/04/24 职场文书
素质教育学习心得体会
2016/01/19 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python