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 ...
随机推荐
- zabbbixs数据库常用操作
设置MariaDB数据库远程 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'IDENTIFIED BY 'admin' WITH GRANT OPTION; SEL ...
- 秋天的第一份“干货” I Referer 防盗链，为什么少了个字母 R？
Referer 为什么叫 Referer?它代表什么意思?在诸多防盗链竞争中它有什么优势? 今天,在聊 Referer 防盗链之前,先来聊聊我们在现实生活中常常碰到的推荐人(Referrer)信息. ...
- CSS网页背景图片等比例占满整个页面的解决方案
想做一个个人展示类的网站首页,用整张图片来当背景,浏览器窗口放大缩小时背景图片不会变形,需要用到分层来实现其他功能,就用DIV来实现了 #bodycontainer { width:100%; hei ...
- Go-err is shadowed during return
where? Go程序函数中在通过 return关键字返回的时候,报错 why? 变量作用域的问题,在子作用域定义一个上层作用域的同名的变量 package main import ( "e ...
- Go-The process cannot access the file because it is being used by another process.
where? Go程序在读取文件时候 why? 因为有其他进程也在读取和Go程序想要读取的文件,参数冲突 way? 关闭其他程序进程对该文件的读取操作
- 树形DP 学习笔记
树形DP学习笔记 ps: 本文内容与蓝书一致 树的重心 概念: 一颗树中的一个节点其最大子树的节点树最小 解法:对与每个节点求他儿子的\(size\) ,上方子树的节点个数为\(n-size_u\) ...
- c++中sprintf和sprintf_s的区别
参考:https://blog.csdn.net/qq_37221466/article/details/81140901 sprintf_s是sprintf的安全版本,指定缓冲区长度来避免sprin ...
- matlab中fseek 移至文件中的指定位置
文章来源:https://ww2.mathworks.cn/help/matlab/ref/fseek.html?searchHighlight=fseek&s_tid=doc_srchtit ...
- Python中list的合并
①差集 方法一: if __name__ == '__main__': a_list = [{'a' : 1}, {'b' : 2}, {'c' : 3}, {'d' : 4}, {'e' : ...
- RHSA-2019:0201-低危: systemd 安全更新
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...