前言

在我们写项目遇到不听话的用户的时候,例如一个登录按钮,他就偏偏要反复点好几次,调用了/login接口好多次,是不是很烦?

因为涉及到ajax请求,就会有这样的情况,假设 1 秒触发了 60 次,每个回调就必须在 1000 / 60 = 16.67ms 内完成,否则就会有卡顿出现。

那么只有请求需要写防抖吗?

当然不是,凡是(可能)涉及到频繁事件触发的地方,都需要写防抖。

  1. window 的 resize、scroll
  2. mousedown、mousemove
  3. keyup、keydown
  4. click事件
  5. ……

我们简单的写一个小demo,看一下没有防抖跟有防抖的效果。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
// 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++;
};


如何实现防抖

实现防抖,就要了解防抖的原理。

防抖就是,不管你触发了几次,我只看你最后触发的那一次,并且在若干时间后去执行此次事件。

根据这个原理,我们可以写出这段代码:

1
2
3
4
5
6
7
function preventShake(todo,time){
let timeout;
return function () {
clearTimeout(timeout)
timeout = setTimeout(todo, time);
}
}

设置一个延迟操作的事件,并且如果再次触发就把之前的延迟取消掉,重新进入计时。

将它运用在刚刚的例子上:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);


我们已经实现了基础的它,那么我们继续优化一下吧!

this指向优化

看似上面的结果没有什么太大问题,但是我们打印一下原先的shake和使用了preventShake后的this就会知道,他们指向的并不是一个东西。

  • 原先指向的是

    1
    2
    3
    <button id="btn">
    <span id="container">点击我</span>
    </button>
  • 使用了preventShake后this指向的是Window对象!

于是我们要加一步,就是改变this指向。

欸,这个是不是又是一篇文章??

1
2
3
4
5
6
7
8
9
10
function preventShake(todo,time){
var timeout;
return function () {
var that = this;
clearTimeout(timeout);
timeout = setTimeout(function(){
todo.apply(that);
}, time);
}
}

这样就解决了this指向可能带来的问题。

最后

至此,这个简易的防抖函数就写完了,可能我想的还不太完善,希望大家给予建议,我也会及时学习,之后将其完善,争取做的更好。