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 ...
随机推荐
- MySQL手注之报错注入
报错注入: 指在页面中没有一个合适的数据返回点的情况下,利用mysql函数的报错来创造一个显位的注入.先来了解一下报错注入常用的函数 XML:指可扩展标记语言被设计用来传输和存储数据. concat: ...
- 使用EasyX和C++写一个消砖块游戏
第一次玩EasyX,写一个比较简单的消砖块游戏. 主函数包括Game的类的开始,运行和结束. 1 #include "BrickElimination.h" 2 3 int mai ...
- 开始在Windows上开发Android
介绍 鉴于您正在阅读这篇文章,您很可能已经知道android是什么了.可能.在科幻小说和电影中,机器人本质上是具有拟人化特征的机器人.还记得<星球大战>里的C-3PO吗?那<星际迷航 ...
- Docker镜像仓库Harbor部署
一.Harbor组件 组件 功能 harbor-adminserver 配置管理中心 harbor-db Mysql数据库 harbor-jobservice 负责镜像复制 harbor-log 记录 ...
- ubuntu20 使用命令安装 redis
安装 redis sudo apt-get install redis-server -y 配置文件 vi /etc/redis/redis.conf # 设置端口 port # 设置密码 requi ...
- 视频+图文教程 | Java之安装JDK与环境配置
演示所用软件JDK 8与Eclipse(Java开发工具)软件下载链接: 链接:https://pan.baidu.com/s/1Vg9ulrQH8WlGRAE89Y02UA提取码:swwl 视频介绍 ...
- css实现中间横线俩边文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一道算法题，引出collections.Counter的特殊用法
题目描述: 题目编号:1002. 查找常用字符 给定仅有小写字母组成的字符串数组 A,返回列表中的每个字符串中都显示的全部字符(包括重复字符)组成的列表.例如,如果一个字符在每个字符串中出现 3 次, ...
- mysql update 子查询作为条件
UPDATE t_commission_template tctJOIN ( SELECT max(id) maxid FROM t_commission_template WHERE taken_m ...
- 多测师讲解a'pi自动化框架设计思想_高级讲师肖sir
API自动化框架API自动化框架分为conf.data.utils.api.testcase.runner.report.log8个模块.conf是用来储存系统环境.数据库.邮件等的配置参数.项目的绝 ...