前端性能优化：防抖与节流-优快云博客

本文链接：https://blog.youkuaiyun.com/xjz19930219/article/details/92406313

防抖和节流

在前端开发中有一部分的用户行为会频繁的触发事件执行，而对DOM操作，资源加载等耗费性能的处理，很卡能导致页面卡顿，甚至浏览器崩溃。函数的防抖和节流因此诞生。
防抖
函数防抖就是在函数需要频繁触发的情况时，只有足够的空闲时间，才执行一次、好像公交车司机会等所有人上车了之后再出站一样
运用场景：实时搜素和拖拽

// 函数的防抖
    var oInp = document.getElementById('inp');
    function debonce(handler,delay) { //handler 对哪个函数进行防抖，delay 延迟多少秒执行
        var timer = null;   
        return function () {
            var _self = this,_arg = arguments;
            clearTimeout(timer); // 每次触发时先清除上一次的定时器,然后重新计时
            timer = setTimeout(function () {  // 指定 xx ms 后触发真正想进行的操作 handler
                handler.apply(_self,_arg)
            },delay)
        }
    }
    function ajax(e) {
        console.log(e,this.value)
    }
    oInp.oninput = debonce(ajax,1000)

节流
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像水滴要攒到一定的重量才会落下。
场景：窗口调整（resize），页面滚动（scroll），抢购疯狂点击（mousedown）

<body>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: yellow;
            border: 2px solid black;
        }
    </style>
    <div id = 'show'>0</div>
    <div id="btn">按钮</div>
    <script>
        var oDiv = document.getElementById('show');
        var oBtn = document.getElementById('btn');
        // 第一次点击能成功触发，在一秒之内不管怎么点都不会触发
        function throttle(handler,wait) {
            var startTime = 0;
            return function () {
                let curTime = new Date().getTime();
                if (curTime - startTime > wait) {
                    handler.apply(this,arguments);
                    startTime = curTime;
                }
            }
        }
        function buy() {
            oDiv.innerText = parseInt(oDiv.innerText) + 1;
        }
        oBtn.onclick = throttle(buy,1000);
    </script>
</body>

总结前端函数防抖与函数节流