聊聊防抖吧-一一网

这是我参与更文挑战的第20天，活动详情查看：更文挑战

前言

好不好奇，为什么只有防抖？好基友节流为什么不写？是我不会吗？

NoNoNo，当然不是，肯定是因为我想水字，啊不是，是写的比较细，所以分开来写。避免学习压力过大。

参考

不得不承认，这部分知识不全是出自我个人的理解，参考了一部分冴羽大佬在github更新的博客中，关于防抖这一块的知识，并且文风和继续方式也会参考，毕竟太强了，我感觉靠自己写不出来。

有疑问和想要提建议可以在评论区留言，不接受批评，因为会影响我心情。

什么是防抖？

老调还得重弹，因为经典：有些高频率触发时间如scroll、risize、search输入，如果做监听都会频发触发时间。

而防抖，就是为了等你做完了骚操作，它再出来收拾现场。

这里先写个待执行函数,css样式就不写了，反正就是个用来做监听的容器。

<body>
    <div id="wrap"></div>
</body>
<script>
    let count = 0;
    let wrap = document.getElementById('wrap');
    function countNum(){
        console.log(count++);
    }
</script>
复制代码

第一版代码

既然已经解释了它的原理，提了它的应用场景，那么先写第一版代码来；

function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}
wrap.onmousemove = debounce(countNum, 1000);
复制代码

软件GG了，看不了效果图了…

这一版的代码，常规来说，应该是满足使用了的，但是有个问题。

在实际业务开发中，通常会有个this指向的问题，如果直接这样写的话，还是会有点问题。

所以就需要重定向this的指向了。

第二版 this

function debounce(func, wait) {
    var timeout;

    return function () {
        var _this = this;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(_this)
        }, wait);
    }
}
复制代码

在外面保存好this，而后在执行函数时用js的.apply函数重定向this指向，解决这一问题。

那么继续抬杠，我既然是监听时间，那么事件会传给函数一个Event参数，这个我要怎么办呢？

弟三版 Event

function debounce(func, wait) {
    var timeout;

    return function () {
        var _this = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(_this, args)
        }, wait);
    }
}
复制代码