前言: 网上有很多关于函数节流和防抖的文章, 比如:
函数节流和函数防抖, 两者都是优化高频率执行 JS 代码的一种手段.
大家大概都知道旧款电视机的工作原理, 就是一行行得扫描出色彩到屏幕上, 然后组成一张张图片. 由于肉眼只能分辨出一定频率的变化, 当高频率的扫描, 人类是感觉不出来的. 反而形成一种视觉效果, 就是一张图. 就像高速旋转的风扇, 你看不到扇叶, 只看到了一个圆一样.
同理, 可以类推到 JS 代码. 在一定时间内, 代码执行的次数不一定要非常多. 达到一定频率就足够了. 因为跑得越多, 带来的效果也是一样. 倒不如, 把 JS 代码的执行次数控制在合理的范围. 既能节省浏览器 CPU 资源, 又能让页面浏览更加顺畅, 不会因为 JS 的执行而发生卡顿. 这就是函数节流和函数防抖要做的事.
下面是我结合例子用最通俗的的比喻解释一下, 看看什么的节流和防抖:
1 函数节流 (一句废话不说 看图)
2 函数防抖
来源: http://www.bubuko.com/infodetail-3041182.html