作为一个开发,我觉得节流和防抖的理念是非常重要,以前我有一篇文章通过举了两个例子来简单的说明了下什么是节流和防抖,今天我将更加详细的去分析说明这两个概念。
备注:有些代码较多的例子为了利于大伙阅读就采用代码图片的形式
![f70aae92f89a2b5350a62cb022d83386.png](https://img-blog.csdnimg.cn/img_convert/f70aae92f89a2b5350a62cb022d83386.png)
举个例子
浏览器中某些计算和处理非常昂贵。比如当鼠标响应resize, touchmove,scroll等操作时,绑定的函数触发的频率会很高,如果该函数稍微复杂一些,响应速度会远远跟不上触发频率,便会出现卡顿,延迟,假死等现象。
下面来看一个例子,根据输入框输入的数据发送ajax请求:
普通处理
普通处理:
复制代码普通处理结果如下:
![93061c1b2588b5ad932726cc265c56a9.png](https://img-blog.csdnimg.cn/img_convert/93061c1b2588b5ad932726cc265c56a9.png)
如上图所见,在输入时会不断的发送请求,非常浪费资源。为优化性能,我们可以使用防抖或节流来防止函数被高频调用。
<