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 ...
随机推荐
- pwnable.kr-mistake-witeup
阅读代码后思路: 实践: 1111111111 其异或值:0000000000 欧克,愉快的结束. 需要经常多看代码,对代码的书写习惯有了解,比如这一块17行一般人书写时都会习惯性加括号的.
- 在vue中使用天气插件
在vue中使用天气插件 插件网址: 中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin ...
- 普转提Day1
T1 给定一个长度为N的序列,去掉其中连续的一部分使得剩下的部分没有重复元素. 很显然可以发现去掉的一部分只有三种情况:开头.中间.最后. 那么我们只需要枚举Hash就可以了.复杂度O(N^2). 不 ...
- 深度预警：深入理解HBase的系统架构
HBase的构成 物理上来说,HBase是由三种类型的服务器以主从模式构成的.这三种服务器分别是:Region server,HBase HMaster,ZooKeeper. 其中Region ser ...
- python 系统设置
1. 设置python运行环境为utf-8 import sys #引用sys模块 reload(sys) #重新加载sys sys.setdefaultencoding("utf-8&qu ...
- 使用maven整合mybatis时出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
分析原因是mybatis的映射文件的问题,首先进行分析排查: 1.检查mapper接口和对应的xml文件的包名是否对应 2.检查xml文件的namespace与mapper接口的包名是否对应 3.检查 ...
- SpringBoot-05-web开发
5. SpringBoot Web开发 5.1 web开发探究 简介 SpringBoot最大的特点就是自动装配! 使用SpringBoot的步骤: 创建一个SpringBoot应用,选择我们需要的模 ...
- 【字符串算法】AC自动机
国庆后面两天划水,甚至想接着发出咕咕咕的叫声.咳咳咳,这些都不重要!最近学习了一下AC自动机,发现其实远没有想象中的那么难. AC自动机的来历 我知道,很多人在第一次看到这个东西的时侯是非常兴奋的.( ...
- Java知识系统回顾整理01基础05控制流程01if
一.if if(表达式1){ 表达式2: } 如果表达式1的值是true, 就执行表达式2 public class HelloWorld { public static void main(Stri ...
- 如何检测ASP中的浏览器。NET与浏览器文件
介绍 ASP.NET是一个用于使用Web表单.MVC.Web API和SignalR(这是官方定义)构建Web应用程序的高生产力框架.它是在.net框架上开发RESTful应用程序或使用HTML.CS ...