防抖节流函数-一一网

1：作用

防抖：解决了疯狂点击导致页面一直加载的问题，杜绝前端页面由于连续加载产生抖动。

节流：后台疯狂接到请求的问题，和后台连续不断请求浪费流量的问题）

2：原理

防抖：在加载时候，只要再次触发，就会自动延时执行事件函数。在一定时间没触发，事件函数才会开始执行。（意味着定时器在每次点击后都会重置）

节流：一个时间内，只做一件事。某段时间内，就让你一次生效机会。一发入魂？？？？

3：例子

要求：在我输入停止1s后打印（要做到图中那般控制力，嘿嘿）

=0.jpg

<body>
    <input type="text" id="input">
    <script>
        var input = document.getElementById('input')
        // 防抖
        function debounce(delay, callback) {
            let timer
            // 闭包：函数里面return出函数
            return function (value) {
                clearTimeout(timer)
                // 想清除的是setTimeout,应该储存timer这个变量
                // timer变量需要一直保存在内存中
                // 既然不想打印1s内的输入结果，那就清除触发的定时器
                // 应该储存timer这个变量，需要一直保存在内存中，内存泄漏-闭包
                timer = setTimeout(function () {
                    // console.log(value);
                    callback(value)
                }, delay)
            }
        }
        // 现实中不需要log类型，所以我们在这行拿到数据
        function fn(value) {
            console.log(value);
        }
        // 要求
        var debounceFunc = debounce(1000, fn)
        input.addEventListener('keyup', function (e) {
            debounceFunc(e.target.value)
        })
    </script>
</body>
复制代码

节流函数实现：
防止某些单身玩家手速过快，连续点击给服务器造成很大压力（服务器：艾玛，麒麟臂！恐怖如斯）

=0.jpg

<body>
    <button id="button">点击</button>
    <script>
        function thro(func, wait) {
            // 在一段时间内，无论点击多少次，都只执行一次
            let timerOut
            // 闭包：函数里面return出函数
            return function () {
                // 相当于上厕所，再急你也得等前面人出来
                if (!timerOut) {
                    // set不执行。如果timeOut有值的话就不执行
                    timerOut = setTimeout(function () {
                        func()
                        // 前面人上完了，马桶坏了，所以要给timeout重新赋值
                        timerOut = null
                    }, wait)
                }
            }
        }
        // 现实中不需要log类型，所以我们在这行拿到数据
        function handle() {
            console.log(Math.random()); //输出随机数
        }
        document.getElementById('button').onclick = thro(handle, 2000)
    </script>
</body>
复制代码