防抖和节流
防抖：单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。触发高频事件，n秒内事件只会执行一次，如果n秒内再次触发，则会重新计算时间
防抖的实用场景：
- 登录发短信按钮，避免用户多次点击发起多次请求
- 调整浏览器大小 resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
- 文本编辑器实时保存，当无任何更改操作一秒后进行保存
- 联想输入法，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
<script type="text/javascript">
// 防抖函数
function debounce (f, wait) {
let timer; // 创建一个标记用来存放定时器的返回值
return (...args) => {
// 每当用户输入的时候把前一个 setTimeout clear 掉
clearTimeout(timer)
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
timer = setTimeout(() => {
f(...args)
}, wait)
}
}
let count = 0;
let divEl = document.getElementsByClassName("div1")[0];
function moveFn(){
divEl.innerHTML = count++;
}
// divEl.addEventListener("click", moveFn,false)
divEl.addEventListener("click", debounce(moveFn, 1000));
</script>
节流：顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null
节流的实用场景
- scroll 事件，每隔一秒计算一次位置信息等
- 浏览器播放事件，每隔一秒计算一次进度信息等
- input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<button class="addBtn">点击count++</button>
<span class="count">0</span>
</body>
</html>
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//节流函数
function throttle (f, wait) {
let timer
return (...args) => {
if (timer) { return }
timer = setTimeout(() => {
f(...args)
timer = null
}, wait)
}
}
function addCount(num){
let initCount = parseInt($(".count").html());
initCount = initCount+num;
$(".count").html(initCount);
}
/* jq的方式来使用节流代码 */
$(".addBtn").click(throttle(()=>{addCount(8)}, 2000))
</script>
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
总结：
防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null
网友评论