JS如何避免重复性触发操作
btn的click事件，每次点击都会执行给定的function，如果function复杂的话，很容易消耗内存
解决方法——setTimeout延时处理。
给function做延迟处理，比如600毫秒后执行，如果在600毫秒内再次触发方法，则将之前的timeout清除。
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .box{
9 width: 800px;
10 height: 500px;
11 overflow: auto;
12 margin: 20px auto;
13 background-color: #ccc;
14 border: 1px solid #ccc;
15 border-radius: 10px;
16 padding: 5px;
17 }
18 .btn{
19 width: 200px;
20 height: 50px;
21 line-height: 50px;
22 background-color: #f00;
23 margin: 20px auto;
24 text-align: center;
25 user-select: none;
26 color: #fff;
27 }
28 </style>
29 </head>
30 <body>
31 <div class='box'>
32 <div class='btn' id='oBtn'>click</div>
33 </div>
34 </body>
35 <script type='text/javascript'>
36 let isr = false //判断是否在600毫秒内再次触发
37 let timer = null //计时器
38 let oBtn = document.getElementById('oBtn')
39 oBtn.onclick = function () {
40 if (isr) {
41 clearTimeout(timer)
42 } else {
43 isr = true
44 }
45 timer = setTimeout(function () {
46 console.log('change')
47 }, 600)
48 }
49 </script>
50 </html>
JS如何避免重复性触发操作的更多相关文章
- PHP中的__toString方法(实现JS里的链式操作)
_toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...
- Node.js文件系统、路径的操作详解
17173 17173 2 75 2014-12-12T05:06:00Z 2014-12-12T05:06:00Z 21 2735 15595 www.17173.com 129 36 18294 ...
- Node.js文件系统、路径的操作函数
Node.js文件系统.路径的操作函数 目录 Node.js文件系统.路径的操作函数 1.读取文件readFile函数 2.写文件 3.以追加方式写文件 4.打开文件 5.读文件,读取打开的文件内容到 ...
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- js 判断js函数、变量是否存在 JS保存和删除cookie操作,判断cookie是否存在的方法
//是否存在指定函数 function isExitsFunction(funcName) { try { if (typeof(eval(funcName)) == " ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js 属性增改删操作
js 属性增改删操作,可参看菜鸟教程,这里记录一个小问题:disabled属性 使用setAttribute操作无法 禁用disabled属性,需使用removeAttribute操作,原因是只要有d ...
- js对数组对象的操作以及方法的使用
js对数组对象的操作以及方法的使用 如何声明创建一个数组对象: var arr = new Array(); 或者 var arr = []; 如何移除所有数组中数据? arrayJson.dataL ...
随机推荐
- MATLAB中均值、方差、均方差的计算方法
MATLAB中均值.方差.均方差的计算方法 1. 均值 数学定义: Matlab函数:mean >>X=[1,2,3] >>mean(X)=2 如果X是一个矩阵,则其均 ...
- day58:Linux:BashShell&linux文件管理&linux文件下载上传
目录 1.BashShell 2.Linux文件管理 3.Linux文件下载和上传 BashShell 1.什么是BeshShell? 命令的解释,用来翻译用户输入的指令 2.BashShell能做什 ...
- 基于NPOI的Excel导入导出类库
概述 支持多sheet导入导出.导出字段过滤.特性配置导入验证,非空验证,唯一验证,错误标注等 用于基础配置和普通报表的导入导出,对于复杂需求,比如合并列,公式,导出图片等暂不支持 GitHub地址: ...
- springboot的启动流程源码分析
.测试项目,随便一个简单的springboot项目即可: 直接debug调试: 可见,分2步,第一步是创建SpringApplication对象,第二步是调用run方法: 1.SpringApplic ...
- java学习网站汇总
1.https://blog.csdn.net/qq_35571554/article/details/82759668 B+树原理漫画讲解2.https://blog.csdn.net/moakun ...
- Lua 协同程序(coroutine)
什么是协同(coroutine)? Lua 协同程序(coroutine)与线程比较类似:拥有独立的堆栈,独立的局部变量,独立的指令指针,同时又与其它协同程序共享全局变量和其它大部分东西. 协同是非常 ...
- 洛谷比赛 「EZEC」 Round 4
洛谷比赛 「EZEC」 Round 4 T1 zrmpaul Loves Array 题目描述 小 Z 有一个下标从 \(1\) 开始并且长度为 \(n\) 的序列,初始时下标为 \(i\) 位置的数 ...
- winfrom加载自定义控件、窗口pannel后闪烁问题
我用一个panel当容器,里面有好多控件,加载的时候一直闪烁. 借鉴网友的思路: 窗口初始化界面加入代码 this.DoubleBuffered = true;//设置本窗体 SetStyle(C ...
- JS-YAML -YAML 1.2 JavaScript解析器/编写器
下载 JS-YAML -YAML 1.2 JavaScript解析器/编写器JS-YAML -YAML 1.2 JavaScript解析器/编写器 在线演示 这是YAML的实现,YAML是一种对人友好 ...
- RHSA-2018:3032-低危: binutils 安全和BUG修复更新
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...