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 相关文章推荐
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
JS验证码实现代码
2017/09/14 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
python使用xmlrpc实例讲解
2013/12/17 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
求职信的要素有哪些呢
2013/12/26 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
创先争优活动承诺书
2014/08/30 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
四风问题对照检查材料
2014/09/22 职场文书
消防宣传标语大全
2015/08/03 职场文书
八年级历史教学反思
2016/02/19 职场文书
导游词之襄阳古城
2019/09/27 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang