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 相关操作可能会导致浏览 ...
随机推荐
- VUE:页面跳转时传递参数，及参数获取
https://www.cnblogs.com/zhongchao666/p/9679807.html https://blog.csdn.net/mf_717714/article/details/ ...
- kube-prometheus部署
一.从git拉取相应yaml文件 git clone https://github.com/coreos/kube-prometheus.git 二.修改grafana及prometheus的serv ...
- 快排的java实现方式，用java代码来实现快排
1. 快排的思想 通过一趟排序将要排序的数据分割成独立的两部分,前一部分的所有数据都要小于后一部分的所有数据,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据的 ...
- ES6高级技巧(三)
html转译 let c='<a href="#">Me & you</a>'.replace(/[&<>'"]/g, ...
- [转帖]中国 GPL 诉讼第一案：关于 GPL 问题的探讨
中国 GPL 诉讼第一案:关于 GPL 问题的探讨 https://linux.cn/article-11683-1.html 2019 年 11 月初,数字天堂(北京)网络技术有限公司(下称:数字天 ...
- vue的package.json文件理解
参考文档: https://www.cnblogs.com/tzyy/p/5193811.html#_h1_0 https://www.cnblogs.com/hongdiandian/p/83210 ...
- java版的状态机实现
状态机适用场景: C的操作,需要等到A.B的两个操作(A.B顺序操作),那就需要在 A.B之间创建一个状态机(state machine),C的操作需要状态机达到某一个状态才能进行 1. Overvi ...
- linux启动tomcat很久或者很慢Tomcat启动时卡在“INFO: Deploying web application directory ......”的解决方法
解决方案: 找到jdk1.x.x_xx/jre/lib/security/java.security文件,在文件中找到securerandom.source这个设置项,将其改为: securerand ...
- C#读写修改设置调整UVC摄像头画面-滚动
有时,我们需要在C#代码中对摄像头的滚动进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- ASP.NET Core 静态文件
静态文件(HTML,CSS,图片和Javascript之类的资源)会被ASP.NET Core应用直接提供给客户端. 静态文件通常位于网站根目录(web root) <content-root& ...