项目开发中防抖和节流

防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数

在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如滚动滚动条事件onscroll，窗口大小改变事件onresize，鼠标移动事件onmousemove, 瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去服务端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。

 实现防抖的方法：

我们拿onresize事件举例子，用户的滚动会频繁触发resize事件，很容易造成页面卡死。那么我们可以封装如下一个函数。每次想调用函数的时候，设置一个定时器让函数延迟执行。当连续触发的时候，前面每次定时器都会清除掉,都会停掉前面的定时器所以函数并不会运行，只会执行最后一次。

 

 

节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数

节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

 实现节流的方法：

当用户连续操作的时候，我们设置一个setTimeout，一段时间后执行函数，并且执行完把标记改为true，函数没有执行完之前一直是false，注意这里是一个闭包结构，真正每次调用的其实是throttle里面return的函数并不是每次都调用throttle，所以canRun只是提供初始值，并不会每次都重新赋值为true。所以用户连续操作的时候，比如用户一秒钟连续操作了十次，但是对于我们这个代码来说，只可能每1000毫秒执行一次，因为只有1000ms之后canRun才为true，才能开启下一个定时器。所以哪怕用户一秒钟之内连续点了十次，其实也只是能执行一次，达到节流的效果。

 通过闭包设置一个门，然后return里面的函数进来先判断门是不是开的，如果为false，门是关的，无法进入，然后等门内定时器走完，将门打开，就可以执行下一次return的函数，return的函数第一步就是把门关上。

防抖和节流的区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。