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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
Javascript 函数对象的多重身份
Jun 28 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP学习之数组值的操作
2011/04/17 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
JQuery toggle使用分析
2009/11/16 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JS高级运动实例分析
2016/12/20 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python中的getopt函数使用详解
2015/07/28 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python docx库用法示例分析
2019/02/16 Python
python 类之间的参数传递方式
2019/12/20 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Python的两道面试题
2013/06/29 面试题
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
出纳工作检讨书
2014/10/18 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
论文答辩开场白大全
2015/05/27 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
nginx配置限速限流基于内置模块
2022/05/02 Servers