对于防抖和节流的理解

起因

常常碰到这样的场景，一段时间内某个方法总是不断地会被触发，然而这些不断地触发可能会影响服务器的性能。防抖和节流就是在这种情况下诞生的。

防抖适用场景为：search搜索联想； 是在事件被频繁触发时，只执行最后一次，比如搜索框输入，停止输入一段时间后才触发请求。

节流：单位时间内防止重复点击； 而节流是无论触发多频繁，都会按照固定的时间间隔执行，比如滚动事件每隔一定时间处理一次。

对比--假设延时都为delay

• 防抖：下一次函数执行与上一次的函数执行的时间间隔始终为delay或者大于delay,若在延时内没有执行完，会重新开始计时。
• 节流：单位时间内，无论函数触发多少次，执行次数都为1次，结果是，delay时间循环执行的感觉。

tips：无限次触发函数时，防抖方式真正的函数不会执行，节流方式函数会间隔执行

代码

防抖

   function debounce(delay,fn){
            var timer
            return function(){
                var _this = this;
                var arg = arguments;
                clearTimeout(timer)
                timer = setTimeout(function(){
                    fn.apply(_this, arg);
                },delay)

            }
            
        }

节流

function throttle(fn,delay){
            var last;
            var timer;
            return function(){
                var _this = this;
                var arg = arguments;
                var now = + new Date();
                if(last && now <last + delay){
                    last = now;
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        fn.apply(_this, arg)
                    },delay)

                }else{
                    last = now;
                    fn.apply(_this, arg)

                }


            }
        }