前言
在我们写项目遇到不听话的用户的时候，例如一个登录按钮，他就偏偏要反复点好几次，调用了/login接口好多次，是不是很烦？
因为涉及到ajax请求，就会有这样的情况，假设 1 秒触发了 60 次，每个回调就必须在 1000 / 60 = 16.67ms 内完成，否则就会有卡顿出现。
那么只有请求需要写防抖吗？
当然不是，凡是（可能）涉及到频繁事件触发的地方，都需要写防抖。
- window 的 resize、scroll
- mousedown、mousemove
- keyup、keydown
- click事件
- ……
我们简单的写一个小demo，看一下没有防抖跟有防抖的效果。
代码：
代码语言：javascript复制// html
<button id="btn" onclick="shake()">
<span id="container">点击我</span>
</button>
// js
var count = 1;
var container = document.getElementById('container');
var btn = document.getElementById('btn')
function shake() {
container.innerHTML = count ;
};
未防抖.gif
如何实现防抖
实现防抖，就要了解防抖的原理。
防抖就是，不管你触发了几次，我只看你最后触发的那一次，并且在若干时间后去执行此次事件。
根据这个原理，我们可以写出这段代码：
代码语言：javascript复制function preventShake(todo,time){
let timeout;
return function () {
clearTimeout(timeout)
timeout = setTimeout(todo, time);
}
}
设置一个延迟操作的事件，并且如果再次触发就把之前的延迟取消掉，重新进入计时。
将它运用在刚刚的例子上：
代码语言：javascript复制var count = 1;
var container = document.getElementById('container');
var btn = document.getElementById('btn')
function shake() {
container.innerHTML = count ;
};
function preventShake(todo,time){
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(todo, time);
}
}
btn.onclick = preventShake(shake,1000);
防抖未优化.gif
我们已经实现了基础的它，那么我们继续优化一下吧！
this指向优化
看似上面的结果没有什么太大问题，但是我们打印一下原先的shake和使用了preventShake后的this就会知道，他们指向的并不是一个东西。
原先指向的是
代码语言：javascript复制<button id="btn">
<span id="container">点击我</span>
</button>
使用了preventShake后this指向的是Window对象！
于是我们要加一步，就是改变this指向。
代码语言：javascript复制function preventShake(todo,time){
var timeout;
return function () {
var that = this;
clearTimeout(timeout);
timeout = setTimeout(function(){
todo.apply(that);
}, time);
}
}
这样就解决了this指向可能带来的问题。
最后
至此，这个简易的防抖函数就写完了，可能我想的还不太完善，希望大家给予建议，我也会及时学习，之后将其完善，争取做的更好。
感兴趣的朋友可以留个关注，我们一同进步！
