防抖和节流的概念
函数防抖(debounce)：触发触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。就是无论事件执行了多少次 都只会在最后一次等待多久执行一次
函数节流(throttle)： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。在固定的事件中只做一件事
本质上是优化高频率执行代码的一种手段
为什么要防抖和节流
滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。 在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非常高，间隔很近。在日常开发的页面中，事件中涉及到的大量的位置计算、DOM操作、元素重绘等等这些都无法在下一个scroll事件出发前完成的情况下，浏览器会卡帧。
函数防抖（debounce）
效果在规定的1秒内不管鼠标移入多少次 只执行最后一次
函数节流（throttle）
总结：
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。
区别：
相同点：
- 都可以通过使用
setTimeout实现 - 目的都是，降低回调执行频率。节省计算资源
不同点：
- 函数防抖，在一段连续操作结束后，处理回调，利用
clearTimeout和setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能 - 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次
