JS定时器实现函数节流和防抖 -简单实现对比 -适用地方
如题 (总结要点)
- 防止重复点击！
- 最近项目中遇见这个“函数抖动”的问题！快速点击前端xx按钮，造成数据多次加载进页面里，正常只显示10条数据，结果显示了20条数据，异常！
- 出现原因： 前端发送ajax异步请求（异步）， 假设发送两次bindData 同时请求，同时清空已有数据，同时接受返回的结果，一个list中便存储了两份数据。手速够快，还可以加进更多分！
- 解决方案：函数节流！强制2秒内仅执行一次！
- 原文链接 :
借鉴学习文章列表
- 链接1: https://www.jianshu.com/p/c8b86b09daf0 函数防抖和节流
- 链接2: https://www.runoob.com/w3cnote/javascript-settimeout-usage.html JavaScript setTimeout() 用法详解（主要靠这个实现）
1.代码： 节流和防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节流</title>
</head>
<body>
<p>
<h4>模板 鼠标移动一次计数+1</h4>
关联文本，绑定，触发鼠标事件
</p>
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script type="text/javascript">
let count =0;
let content = document.getElementById('content');
function countNum() {
count++;
content.innerHTML = count;
}
content.onmousemove = countNum
</script>
<hr>
<p>
<h4>节流思路 </h4>
每两秒允许触发一次计数时间
设置一个计数变量‘timeout’，每次执行加法的时候判断timeout是否为0；<br>
如果为0，则执行加法，将timeout变为2000，设置计数时间，在两秒后置零timeout；<br>
否则因为timeout没有置零，什么都不做，干等着就行了。<br>
</p>
<div id="content2" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script type="text/javascript">
let count2 = 0;
let content2 = document.getElementById('content2');
let timeout=0
function countNum2() {
// timeout不为空，则间隔时间还没结束，等着结束
if(timeout!==0){
console.log('wait，节流中，2s时间还没有到，什么都不做--')
}else{
// 立即执行加法
count2++;
content2.innerHTML = count2;
timeout=2000
// 设置计数器
setTimeout(function clearTime() {
timeout = 0
}, timeout)
}
}
content2.onmousemove = countNum2
</script>
<hr>
<p>
<h4>防抖思路 </h4>
冷却时间不够，就重新计算冷却时间，直至冷却时间够了在调用
</p>
<div id="content3" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script type="text/javascript">
let count3 = 0;
let content3 = document.getElementById('content3');
let timeout3=0
let meter
function countNum3() {
// timeout不为空，则间隔时间还没结束，等着结束
if(timeout3!==0){
console.log('wait，防抖，2s时间还没有到，重新开始2s计数')
// 清空计时器，重新开始计时
clearTimeout(meter)
meter = setTimeout(function clearTime() {
timeout3 = 0
}, timeout3)
}else{
// 立即执行加法
count3++;
content3.innerHTML = count3;
timeout3=2000
// 设置计数器
meter = setTimeout(function clearTime() {
timeout3 = 0
}, timeout3)
}
}
content3.onmousemove = countNum3
</script>
</body>
</html>
2.测试
3. 适用场景
以上即可，灵活运用；比如文件下载就防抖（这个比较占用服务器资源，不可频繁下载），页面刷新就节流。
JS定时器实现函数节流和防抖 -简单实现对比 -适用地方的更多相关文章
- JS 函数节流与防抖
前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JS在项目中用到的AOP, 以及函数节流， 防抖, 事件总线
1. 项目中在绑定事件的时候总想在触发前,或者触发后做一些统一的判断或逻辑,在c#后端代码里,可以用Attribute, filter等标签特性实现AOP的效果,可是js中没有这种用法,归根到本质还是 ...
- JS函数节流和防抖
看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...
- js函数节流和防抖的理解与实现
一:函数防抖1.理解:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间2.思路:每次触发事件时都取消之前的延时调用方法 3.实现: function debounce ...
- 谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...
- [转] 谈谈JS中的函数节流
函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...
随机推荐
- IBM X3650 m4 面板指示灯
- 解决：Java source1.6不支持diamond运算符,请使用source 7或更高版本以启用diamond运算符
diamond运算符,指的是JDK1.7的一个新特性.Maven默认用的是JDK1.6去编译.所以需要配置成更高的版本,有以下几种解决办法: 1.在项目pom.xml中加入下面的配置即可 <pr ...
- VUE控件 VueTreeselect 参数options的数据转换
VueTreeselect 控件 <Treeselect :options="options" :normalizer="normalizer" plac ...
- C语言交换两个指针所指位置的数值
交换指针变量x和y所指向的存储位置处存放的值,不需要第三个位置来存储临时变量.这种方式并没有性能上的优势. void replace(int *x, int *y) { *y = *x ^ *y; * ...
- 谷歌浏览器安装Elasticsearch-head 插件
下载该插件,地址:https://github.com/liufengji/es-head/blob/master/elasticsearch-head.crx 下载后的文件名是:elasticsea ...
- ubuntu开发常用收集
命令: 1.http://blog.csdn.net/simongeek/article/details/45271089 2.http://www.jianshu.com/p/654be9c0f13 ...
- Micro 设计文档
1.顶部 即时通讯 | 应用软件 | 网络学院 | 帮助中心 | 开发者中心 | 控制台 2.导航 首页 免费制作 免费下载 功能介绍 示例演示 云数据 支持与服务 免费制作:https://www. ...
- web技术栈开发原生应用-多端共用一套代码
weex: vuejs开发原生应用 nativescript: vuejs开发原生应用 ReactNative = reactjs开发原生应用 ionic = angularjs 开发原生应用
- Dubbo(二)：zookeeper 注册中心
zookeeper 注册中心 Zookeeper 是 Apacahe Hadoop 的子项目,是一个树型的目录服务,支持变更推送,适合作为 Dubbo 服务的注册中心,工业强度较高,可用于生产环境,并 ...
- Spring Aware获取Bean和其他对象
Spring的容器托管了所有bean,实际项目中我们经常会用到容器中的功能资源,这时候就用到了 Spring Aware.简单来说,就是Spring Aware可以帮助你获取到Spring容器中的Be ...