如题 (总结要点)
- 防止重复点击！
- 最近项目中遇见这个“函数抖动”的问题！快速点击前端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. 适用场景
以上即可，灵活运用；比如文件下载就防抖（这个比较占用服务器资源，不可频繁下载），页面刷新就节流。