First of all 笔者是爱哭的双鱼座 有话好好说 别撕 别杠 谢谢~
激发读者阅读兴趣的balabala
防抖和节流都是控制事件触发频率的方法，也是前端性能优化的一种手段，面试基本都会问得到。但是这两者概念极容易混淆，今天我就要具体说道说道这两个东西分别都是什么、怎么实现、怎么区分~
防抖
顾名思义，防抖的重点在于防。举个栗子，假如我要给一个div绑定mousemove事件，鼠标在该div上移动时它会被频繁的触发（见下图）。我对它做防抖处理，给定时间500毫秒。mousemove事件不会再触发后立即执行，而是在500毫秒后执行，如果在500毫秒内又触发了该事件，则会重新计算执行时间。也就是说,防抖将多次执行变为最后一次执行。这就防止了高频的执行。
防抖前代码：
防抖前效果（别问为啥是绿色，问就是护眼）：
防抖后代码：
防抖后效果：
节流
依然先从字面意思去理解，节流的点在于节。让函数有节制的执行。举个栗子，仍旧是上面的mousemove事件。仍旧给定时间500毫秒。节流操作后，mousemove事件会变为每隔500毫秒执行一次。也就是说，节流不会断流，频繁触发仍会多次执行，但会降低频率，只在规定时间间隔内执行一次。看到这里读者可能会疑惑，防抖不也是执行一次吗？那又有什么区别呢？请看下面的效果图，同样的动作，防抖的函数不会被触发。
节流后效果：
节流后代码：
最后再balabala
balabla的说了这么多，具体要怎么应用这两种手段还是要看具体情况。还是举栗子，说一堆专业术语不如整个栗子通透。
第一个栗子，我有个表单提交按钮，要向后端发一个ajax请求，这时候要是客户手抖咔咔点发送一百来个请求，服务器得多难受。这种情况就要给按钮点击事件加个防抖，你咔咔点那么多次没关系，我就执行你最后一次，不耽误你提交，我也省心~
第二个栗子，页面上有个icon,监听他的touchmove事件，touchmove时改变它的位置实现拖拽效果，但是touchmove事件触发的频率也太高了，这可咋整页面都卡了。这时候就给touchmove加个节流吧，每100ms或者200ms读一次位置就行啦，能实现拖拽效果，页面也不卡~
呐，大概就是酱紫了！（写到最后有点放飞自我了，东北话都彪出来了...）
