javascript 节流/防抖 （网络请求性能优化）

在网页实际运行的某些场景下，有些事件时会被不间断的被触发的，如resize事件，而不像是我们想象中的，滚动一次触发一次。这种情况下，由于过于频繁地DOM操作和资源加载，严重影响了网页性能，甚至会造成浏览器崩溃，合理的使用节流 可以防止以上情况发生

节流/防抖 就是规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。就好比如水滴攒到一定的重量才会落下一样，

常见应用场景：

• 窗口调整（resize)
• 窗口滚动(scroll)
• 元素位移（mousemove）
• 抢购疯狂点击(click)
• input输入框（keyup）

节流

 <div id="show">0</div>
 <button id="btn">click</button>

    <script>
        var oDiv = document.getElementById('show')
        var oBtn = document.getElementById('btn')

        function throttle(handler, sitOut) {//封装节流函数
            var lastTime = 0;
            return function () {
                var nowTime = new Date().getTime()//获取当前时间的毫秒值
                if (nowTime - lastTime > sitOut) {
                    handler();
                    lastTime = nowTime;
                }
            }
        }
        function buy() {
            //操作事件
            oDiv.innerText = parseInt(oDiv.innerText) + 1;
        }

        oBtn.onclick = throttle(buy, 1000)//事件函数和间隔时间

    </script>

上面代码中我使用的方式是 通过Date()获取当前时间的方式 还可以用 定时器setTimeout去实现。

防抖

 <input type="text" id="input">
    <script>
        var ipt = document.getElementById('input');
        function debounce(handler, delay) { //封装防抖函数
            var timer = null;
            return function () {
                var _self = this, _arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    handler.apply(_self, _arg)
                }, delay)
            }
        }
        function ajax(e) {
            console.log(e, this.value)//处理程序
        }

        ipt.oninput = debounce(ajax, 1000)//一秒后执行
    </script>