一文带你深入了解JavaScript防抖

前言

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

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

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

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

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

我们简单的写一个小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++;
};

如何实现防抖

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

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

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

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);

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

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指向可能带来的问题。

最后

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

感兴趣的朋友可以留个赞，我们一同进步！