以前我也写过防抖函数的博客，现在回过头，感觉自己曾经只是贝多芬填鸭式的写下了防抖函数，我相信很多老铁和我一样，过一段时间没有去记防抖的写法就会忘记。本文从需求的角度来刨析和构思我们的防抖函数，让我们深刻记住防抖函数。
比如我们点击按钮发送请求给后端，如果用户频繁点击按钮触发请求，那势必会给后端服务器带来了压力，又比如监听输入框的变化发送请求，短时间内频繁输入，用户其实只是想要最后输入的结果去后端拿数据，而我们没有防抖的话，那用户在输入的过程中一直触发请求，其实这是对资源的浪费，是没有必要的。
从这些需求提取出关键的特性，一定时间内，频繁触发的话，取消掉之前的触发，只执行最后一次。比如我们定这个时间为500s，先点击一下，500s之后就会执行发送请求的函数。如果还没到500s这时又点击了一下，我们就要取消掉之前的执行，也可以说是中断了发送请求的动作，不然其发生请求。从第二次点击开始，我们又要算500s毫秒，如果又在500s内点击了按钮，那又要取消掉第二次点击里面的函数，中断发送请求的动作，但是如果没有第三次点击，第二次500s后就会触发发送请求的动作。到这里其实防抖的逻辑已经用自己的话翻译的出来了，接下来用代码去翻译这些话就可以了，但这里还有一个问题，是如何使用我们的防抖函数，我们可以先把我们想要的用法写出来，比如这样，防抖函数有两个参数，一个接收处理我们要防抖的处理函数，一个接收触发的延迟时间。比如下面：
<body>
<button onclick="add()">发送请求</button>
<h1 id="test">0</h1>
<script>
let add=debound(()=>{//调用防抖函数，传入需求防抖的回调函数，延迟时间
//这里执行要防抖的代码
document.getElementById('test').innerHTML++
},500)
</script>
</body>
我们希望的这样的，点击一次页面数字就加1，但是频繁点击的话，如果每次点击后500s内还点击的话，会出现防抖效果，直到有一次点击后500s内没有再点击才会触发加1操作。
从上面的代码中我们可以看出，构思防抖函数，第一个参数是传入处理防抖代码的函数，第二个参数是延迟时间，而且是返回一个函数。并且要有一个变量来保存上一次的定时器，如果500s后又点击了就要通过这个变量来停止定时器。有下面代码：
function debound(fn,delay=300){
let timer;
// let _this=this
return function(){
clearTimeout(timer)
timer=setTimeout(()=>{
// fn.apply(_this,arguments)
fn()
},delay)
}
}
现在这个样子的防抖对应我们这个需求完全是够用的，但是如果在执行add的时候传入参数，或者fn中有this的问题，我们需求使用注释掉的代码。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
