防抖 节流_关于防抖和节流

虾扯蛋之函数防抖和节流 - 掘金
先贴贴 这个哥们的。 因为我看了很多，感觉大多都是复制。没有啥思考

在介绍以下这些问题的时候。先公示下我思考的时候出现的问题
1、如果你使用 onclick 和 addEventListenter 需要明白他们的区别 ，其实没啥好说的但是有一点请记住 onclick 不能使用闭包或者匿名函数。

2、那就是 在闭包的情况下 函数内部的变量为什么还是可以被return出来的function保持访问等等，可以从call stack和scope独立的角度来理解 。（这个我暂时也是迷糊的）但是以闭包的角度看就没啥问题。具体词法作用域的问题 堆 栈问题 可以以后深入

以上问题大致了解之后看我们的重点

一、防抖

概念：当持续触发事件时， 合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件（当然分立即执行或者延迟执行）。

什么是防抖？能不能通俗点？举几个栗子

1、武侠 高手对付低手，一瞬间就给低手100次，100次全部打中。但是碰到另一个高手，打了100次 就就打中了2次

2、上公交 本来是1个人上车就 司机就关门开车， 但是一下来了很多人，于是就都上了 才关门开车

<script>
    var xcd = document.getElementById('xcd');
    var count = 1;
    //要执行的操作 数字+1
    function doSomething() {
        xcd.innerHTML = count++;
    };
    function debounce(doSomething, wait) {
        var timeout; 
        return function () {
            var _this = this,
                _arguments = arguments;
            console.log(timeout); // 点击次数
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                doSomething.apply(_this, _arguments);
            }, wait);
        }
    }
    xcd.onclick = debounce(doSomething, 1000);
</script>

上述 会出现啥效果呢

就是我连续点击 count 就加1 然后显示出来，如果我超过一秒没有点击 再点一次就再加1
到这里你应该彻底明白啥事防抖了

如下图

点击了红色区域2次 从没有变成了1

疯狂点击 就执行了1次 变成了2

以上就是最基本的防抖措施

二、函数节流

概念：持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件

这个不是很绕口 ，可以理解啊。 就是一定时间内 只能触发一次

   function doSomething1() {
        xcd1.innerHTML = count++;
    };

    const throttle = (func, wait, ...args) => {
        let pre = 0;
        return function () {
            const context = this;
            let now = Date.now();
            console.log(now);
            if (now - pre >= wait) {
                func.apply(context, args);
                pre = Date.now();
            }
        }
    }
    xcd1.onclick = throttle(doSomething1, 1000);

疯狂点击 ，这么多次输出这么多时间，生效的只有6次

当然你们还可以扩展