防抖和节流

1、防抖和节流的定义

防抖（deounce）

如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。 函数防抖可以把多个顺序的调用合并成一次。

节流（throttle）

如果一个事件被频繁触发多次，节流函数可以按照固定频率去执行对应的事件处理方法。 函数节流保证一个事件一定时间内只执行一次。

2、节流和防抖的实现方法

防抖实现

防抖的特性，多次触发，只执行最后一次，可以用setTimeout来实现

   <input type="text" oninput="inputChange()">
    function callback() {
        console.log("防抖哟")
    }
    function debounce(fn,delay){
        var timer;
        //console.log("enter");
        return function () {
            //重新计时
            clearTimeout(timer);
            timer=setTimeout(fn,delay);
        }
    }
    var inputChange=debounce(callback,1000)

节流实现

节流的特性就是，固定时间间隔内执行一次，在这个时间段内触发不会重新计时

   <input type="text" oninput="inputChange()">

   function throttle(fn,time){
        var timer;
        var startTime=new Date();
        return function () {
            var currentTime=new Date();
            clearTimeout(timer);
            if(currentTime-startTime>=time){
                fn();  //如果下一次触发事件大于或等于时间间隔，直接执行
                startTime=currentTime;   //更新开始时间
            }else{
                //如果下一次触发的时间不大于时间间隔，则不理会，继续计时
                //或者不在出发事件时，最后还会执行一次
                timer=setTimeout(fn,time);
            }
        }
    }
    var inputChange=throttle(callback,1000)

3、节流和防抖的应用场景

节流：

处理滚动事件

处理鼠标点击事件

防抖：

处理用户的输入事件

处理resize事件