不会还有人不知道防抖吧？

是乃德也是Ned

发布于 2022-08-04 10:09:35

2590

发布于 2022-08-04 10:09:35

文章被收录于专栏：前端成长日记

前言

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

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

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

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

window 的 resize、scroll
mousedown、mousemove
keyup、keydown
click事件
……

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

代码：

// 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

如何实现防抖

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

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

根据这个原理，我们可以写出这段代码：

function preventShake(todo,time){
 let timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(todo, time);
    }
}

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

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

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就会知道，他们指向的并不是一个东西。

原先指向的是

<button id="btn">
    <span id="container">点击我</span>
</button>

使用了preventShake后this指向的是Window对象！

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

function preventShake(todo,time){
    var timeout;
    return function () {
        var that = this;
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            todo.apply(that);
        }, time);
    }
}

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