一、什么是函数防抖
概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
二、为什么需要函数防抖
前端开发过程中,有一些事件,常见的例如,onresize、mousemove 、mousehover 等,会被频繁触发(短时间内多次触发),不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,还会降低程序运行速度,甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
三、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖</title>
</head>
<body>
<input type="text"/>
</body>
</html>
<script>
let input=document.querySelector("input");
input.oninput=debunce(function(){
//如果使用fn.call(this);this指向window
console.log(this.value)
// console.log(this)
},500);
function debunce(fn,delay){
//用于存储定时器
let t;
return function(){
//如果之前有定时器则清楚,这样只会执行最后一次
if(t) clearTimeout(t)
// console.log(this) input
t=setTimeout(()=>{
//用于改变函数this的指向
console.log(this) //input
fn.call(this);
},delay)
}
}
</script>
所以防抖主要是为了不浪费计算机资源,减少资源的消耗。