节流、防抖

向右看齐 2022-01-30 00:39 350阅读 0赞

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担

节流：尽量减少触发次数，mint-ui上封装了一个方法

throttle 方法return出来一个方法（闭包），所以throttle执行完后，在闭包里使用的局部变量和方法都没有销毁，将每次执行fn的时间记录到lastExec变量中。  
第一次时fn会被执行，以后都会有delay时间的限制，delay时间一到就会执行一次事件处理函数。  
最后的输出结果是  
![在这里插入图片描述][20190517143544587.png]

防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。  
上来不会执行，当满足指定的时间后才会执行  
也就是将几次操作合并为一次操作进行

function debounce(fn, wait) {    
        var timeout = null;    
        return function() {        
            if(timeout !== null)   clearTimeout(timeout);        
            timeout = setTimeout(fn, wait);    
        }
    }

借用别人总结的话：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

[20190517143544587.png]: /images/20220130/05c8d1610a8e46ffa90bea9fd30c66c2.png