防抖和节流

防抖

触发高频事件后n秒内函数只执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

防抖函数

    function debounce(fn,delay){
        let timer = null;
        return function(){
            clearTimeout(timer);
            let that = this, args = arguments;
            timer = setTimeout(funtion(){
                fn.apply(that,args)
            },delay)
        }
    } 

一般用于input或者srcoll事件上。输入框搜索防止输入过快向后端发很多个请求，就是限制多长时间才能执行一次。重复操作会重新计算时间。

节流函数

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

    function throttle(fn,delay){
        let timer = null,flag = false;
        return function(){
            if(flag){
                return
            }
            flag = true;
            let that = this,args = arguments;
            timer = setTimeout(function(){
                clearTimeout(timer);
                flag = false
                fn.apply(that,args)
            },delay)
        }
    }
    

一般用于mousemove或者resize事件上，避免触发N次事件，限制多少毫秒内只能执行一次，提高性能;