防抖函数
2021-03-04 本文已影响0人
呆桃冲鸭冲鸭
防抖函数：短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
为什么需要防抖函数：
onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次。如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
搜索框实时发请求，短时间内重复的 ajax 调用，会造成数据关系的混乱，还会造成网络拥塞，增加服务器压力。
函数节流的使用场景：用于连续的事件只需触发一次回调的场合。
1.搜索框搜索输入。只需用户最后一次输入完，再发送请求；
2.用户名、手机号、邮箱输入验证；
3.浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。
非立即执行版本：触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content" style="
height:150px;
line-height:150px;
text-align:center;
color: #fff;
background-color:#ccc;
font-size:80px;"
>
</div>
</body>
<script>
let num = 1;
let content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
// 非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
function debounce(func, time){
let timer = null;
return function(){ //使用闭包防止每次调用时将timer初始化为null；
if(timer){
clearTimeout(timer)
}
//重新设置新的延时器
timer = setTimeout(()=>{
func.apply(this); //修正func函数的this指向，不然this其实只向window
},time)
}
};
content.onmousemove = debounce(count,1000);
</script>
</html>
立刻执行版本：触发事件会立即执行，然后在n秒内不触发事件才能继续执行函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content" style="
height:150px;
line-height:150px;
text-align:center;
color: #fff;
background-color:#ccc;
font-size:80px;"
>
</div>
</body>
<script>
let num = 1;
let content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
function debounce(func, time){
let timer = null;
return function(){
let context = this;
let args = arguments; // arguments中存着e
if(timer){ clearTimeout(timer) };
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, time);
if(callNow){
func.apply(context, args); //修正func函数的this指向，不然this其实指向window
}
}
};
content.onmousemove = debounce(count,1000);
</script>
</html>
