防抖和节流

Posted 2020-11-24 linhongjie

最近在面试的时候有一面试题是关于防抖节流的，回来加强了一下，做以下总结，希望对大家有所帮助！

先来说一下防抖和节流的应用场景

　 防抖 - debounce：

         1、input框输入时，可以使用防抖节约资源的请求，比如搜索框

　　  2、window触发resize时，当用户停止改变窗口的大小时，再触发事件

   节流 - throttle：

　　　1、 scroll滚动事件

　　　2、鼠标不断点击，mouseover事件等

 

下面用一个scroll事件，来实现以下节流和防抖吧

        // 防抖
        function debounce(fn,wait) {
            var timeout = null
            return function() {
                if(timeout !== null) clearTimeout(timeout)
                timeout = setTimeout(fn,wait)
            }
        }
        function handle() {
            console.log(Math.floor(Math.random()*100))
        }
        window.addEventListener(‘scroll‘,debounce(handle,1000))
                  

       //节流
        function throttle(func,delay) {
            var timer = null
            return function() {
                var that= this
                var args = arguments
                // 定时器不存在时，触发一个定时器，回调中清除定时器
                if(!timer) {
                    timer = setTimeout(() => {
                        func.apply(that,args)
                        timer = null
                    }, delay);
                }
            }
        } 

       function func() {
            console.log(parseInt(Math.random()*100))
        }

        window.addEventListener(‘scroll‘,throttle(func,1000))