节流与防抖

节流(Throttle)和防抖(Debounce)都是限制函数执行次数的方式。

防抖函数

        在滚动条事件中，当用户拖动滚动条，就会触发滚动条事件，从而调用回调函数执行操作，这样高频率的调用回调函数，就会导致资源的浪费和卡顿。那么如何使用防抖函数来减少执行次数呢？

1.防抖：通过定时器，在一定时间间隔内只执行最后一次操作，也就是说，如果在时间间隔内，又触发了事件，定时器会重新开始计时，从而减少回调函数的执行次数，以节约资源。

想象一下，如果你在电梯里，电梯门3秒关闭，如果这个时候，不断有人进入电梯，那么这个时间里电梯门是不会关闭的，并且每个进入电梯的人都会使电梯门重新计时，当所有人都进入电梯，3秒后，电梯门关闭。在这个例子里，电梯门关闭就是事件触发后要执行的操作，而等待的3秒就是时间间隔。

防抖函数可以运用到的事件还有onmousemover,onmouseout...

    let times;//1
    let time=200;//2
    function fun(){//3
        console.log("执行一次");
    }
    window.onscroll=function(){//4
        clearTimeout(times);//5
        times=setTimeout(fun,time);//6
    }
  

1.设置定时器

2.设置时间间隔为200毫秒，在此时间间隔内，只执行最后一次操作

3.事件被触发要执行的操作

4.定义滚动条事件，将判断此次触发是否超出规定时间间隔的函数赋值给该事件

5.清除定时器，因为事件触发在规定的事件间隔内，因此事件又重新调用判断函数，此时就需要清除上一次设置的定时器，然后从此次触发开始重新计时。

6.重新设置定时器，若此次事件触发在设置的时间间隔外，则调用执行函数，执行具体操作

 将判断此次触发是否超出规定时间间隔的函数独立出来，就是防抖函数

    function debounce(callback,time){//1
        let times;
        return function(){//2
            clearTimeout(times);
            times=setTimeout(callback,time);
        }
    }

    window.onscroll=debounce(function(){ //3
        console.log("执行一次");
    },200);

 1.定义防抖函数，该函数有两个参数，第一个参数是一个函数，存放时间间隔结束时执行的操作，第二个参数是时间间隔

2.当事件触发时，若未在规定时间间隔外，则需要清除定时器并且重新设置定时器，而这两条操作无法直接返回，因此需要定义函数将其包裹

3.在进入页面时就会调用debounce函数，将debounce函数的返回值赋给滚动条事件，此后，滚动条事件一旦触发，就会调用该函数进行判断。

 节流函数

        当用户在登录时，会点击"登录"按钮，此时将会发送请求到后台，点击一次发送一次请求，此时频繁的请求对于资源是一种不必要的浪费，此时我们可以使用节流的方式去限制用户的提交，即一段时间内，只执行第一次操作。

   function thscroll(callback,time){//1
        let lasttime=new Date().getTime();//2
        return function(){//3
            let nowtime=new Date().getTime();
            if(nowtime-lasttime>time){
                callback();
                lasttime=nowtime;
            }
        }
    }
    document.getElementById("button").onclick=thscroll(login,3000);//4
    
 

1.定义节流函数，该函数有两个参数，第一个参数是一个函数，存放第一次点击和每次时间间隔结束后点击时执行的操作，第二个参数是时间间隔

2.刚进入页面时，记录此时间，为第一次点击的时间，此后的第一次点击的时间，是时间间隔内第一次点击的时间。

3.当事件触发时，需要判断现在点击记录的时间减去上一次点击的时间是否大于时间间隔，若大于，则可以执行操作，否则把现在点击的时间作为上一次点击的时间，而这两条操作无法直接返回，因此需要定义函数将其包裹

4.在进入页面时就会调用thscroll函数，将thscroll函数的返回值赋给点击事件，此后，点击事件一旦触发，就会调用该函数进行判断。