防抖和节流的性能优化

前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。

防抖：指触发事件后n秒内函数只执行一次，如果n秒内又触发了事件，则会重新计算函数执行时间

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector(".box")
        var testDebounce=debounce(move,1000)
        box.onmousemove = testDebounce
        function move(ev){
    
    
            this.innerHTML = ev.clientX
        }
        function debounce(fn, wait) {
    
    
            let timer = null
            return function () {
    
    
                var args=arguments;
                timer && clearTimeout(timer)
                timer = setTimeout(()=>{
    
    
                    fn.apply(this,args)
                    timer=null
                },wait)
            }
        }
    </script>
</body>

节流：连续触发事件但是在一段时间内只执行一次函数

时间戳方案

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector(".box")
        box.onmousemove = jl(move, 500)
        function move(ev) {
    
    
            this.innerHTML = ev.clientX
        }
        function jl(fn, wait) {
    
    
            let last = 0
            return function () {
    
    
                var now = Date.now();
                if (now - last > wait) {
    
    
                    var args = arguments;
                    fn.apply(this, args)
                    last=now;
                }
            }
        }
    </script>
</body>

定时器方案

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector(".box")
        box.onmousemove = jl(move, 500)
        function move(ev) {
    
    
            this.innerHTML = ev.clientX
        }
        function jl(fn, wait) {
    
    
            let timer = null
            return function () {
    
    
                var args = arguments;
                if (!timer) {
    
    
                    timer = setTimeout(() => {
    
    
                        fn.apply(this, args)
                        timer = null
                    }, wait)
                }
            }
        }
    </script>
</body>

防抖和节流的性能优化

猜你喜欢