防抖和节流

Posted 2020-12-08 zx-666

在开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数浪费性能。

 

防抖：

指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

 

原理：在第一次调用函数的时候，创建一个定时器，在指定的时间间隔之后运行代码；如果代码还没运行时，又触发了该函数，则清除旧的定时器，重新创建新的定时器；如果超过延时执行的时间，代码执行了，则此时已经是第二次触发；

- earch搜索联想，用户在不断输入值时，用防抖来节约请求资源。

- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

代码：

　　const  handle=()=>{

　　console.log(Math.random());

　　}

       function debounce(fn, wait) {

            var timeout = null;

            return ()=>{

                if (timeout !== null)

                    clearTimeout(timeout);

                timeout = setTimeout(fn, wait);

            }

        }

window.addEventListener(‘scroll‘, debounce(handle, 1000));

 

节流：

指连续触发事件但是在 n 秒中只执行一次函数，一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

 

原理：第一次执行函数的时候，记录函数执行的时间，当下一次执行的时候，比较时间是否还在间隔时间内，如果是则不执行，否则继续执行；

- 鼠标不断点击触发，mousedown(单位时间内只触发一次)

- 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

代码：

　　const  handle=()=>{

　　console.log(Math.random());

　　}

       

        function throttle(fn, delay) {

            var lastTime = 0; // 上一次函数触发的时间

            return () => {

                var nowTime = Date.now();

                if (nowTime - lastTime > delay) {

                    console.log(this);

                    fn(); // method.apply(this) 看你用不用箭头函数

                    lastTime = nowTime;

                }

            }

        }

window.addEventListener(‘scroll‘, throttle(handle, 1000));