【前端性能优化】——防抖（debounce）和节流（throttle）

防抖和节流

防抖和节流主要是针对用户的鼠标点击事件进行的一个性能优化处理，在日常开发中十分常见。

防抖和节流的定义

防抖：高频触发事件后n秒内函数只会执行一次，在n秒内再次触发事件，则会重新计时。

节流：高频触发事件在n秒内只执行一次。

共同点：防抖和节流都是为了限制函数的执行频率，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。是前端性能优化的方式之一。

防抖和节流的应用场景

防抖应用场景：

• 1.搜索栏的输入框，对用户的不断输入采用防抖机制，节省请求资源
• 2.wimdow触发resize时，调整浏览器大小时会不断触发该事件，使用防抖可以只触发一次

节流应用场景：

• 1.购物车中添加商品数量，使用节流可以使得计算商品总价时不会延时
• 2.监听浏览器滚动事件时，使用节流减少事件触发次数

JS实现防抖和节流

防抖的实现原理：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法

function fangDou(