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 ...
随机推荐
- 安装Angular CLI开发工具
目前,无论你使用什么前端框架,都必然要用到NodeJS工具,Angular也不例外,与其他框架不同的是,Angular一开始就使用"全家桶"式的设计思路,因此@angular/cl ...
- 过万 star 高星项目的秘密——GitHub 热点速览 Vol.39
作者:HelloGitHub-小鱼干 虽然国外十一并不过国庆,但是本周的 GitHub 也稍显疲软,GitHub 周榜的获 star 超过 1k 的项目寥寥无几,本周新开源的项目更是屈指可数.用 C ...
- mysql-18-function
#函数 /* 存储过程:可以有0个或多个返回,适合批量插入.批量更新 函数:有且仅有一个返回,适合处理数据后返回一个结果 */ #一.创建语法 /* create function 函数名(参数列表) ...
- QT博客：QT学习之路
http://www.qter.org/thread-629-1-1.html
- 【Hadoop】伪分布式安装
创建hadoop用户 创建用户命令: sudo useradd -m hadoop -s /bin/bash 创建好后需要更改hadoop用户的密码,命令如下: sudo passwd hadoop ...
- PADS Layout VX.2.3 修改层名
操作系统:Windows 10 x64 工具1:PADS Layout VX.2.3 点击菜单Setup > Layer Definition... 在Layers Setup窗口中,选择相应的 ...
- Ubuntu通过iptables配置 ip 代理转发
开启 ip 代理转发 临时开启 ip 代理转发 # 执行该命令后立即生效,但是重启后会失效 echo 1 | sudo tee /proc/sys/net/ipv4/ip_forward 永久开启 i ...
- python 中的三种等待方式
为什么要用等待时间: 今天在写App的自动化的脚本时发现一个元素,但是往往执行脚本是报错( An element could not be located on the page using the ...
- IDEA设置External Tools之Javap反编译字节码
通过Jdk的命令javap可以反编译查看字节码,但是在使用idea的时候一直用命令行去操作不太好操作,而且因为idea会把class码 放在target里面,经常会忘记切换目录.这个时候idea的Ex ...
- Centos 6.9安装 php5.6 过程中报错：Error: Package: php56w-mcrypt-5.6.40-1.w6.x86_64 (webtatic)
在 CentOS 6.9 系统下安装 php 5.6 的过程中,执行如下命令: yum -y install php56w-pdo php56w-xml php56w-gd php56w-gd.x86 ...