js中的函数节流

Love The Way You Lie 2022-05-15 03:06 199阅读 0赞

对于常见的场景，1、使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作，其高频率的更改可能会让浏览器崩溃。   
2、我们常见的一个搜索的功能，我们一般是绑定keyup事件，每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。

大部分节流都采用时间做节流，即时间间隔小于多少的不再调用，但同时保证一个最小调用间隔。（否则拖拽类的节流都将无效果），也可以用调用次数做节流，但要考虑最后一次调用需要要执行。

**概念：**函数节流是通过一个定时器，阻断连续重复的函数调用，从而一定程度上优化性能。

**用途：**主要用于用户界面调用的函数，如：resize、mousemove、keyup事件的监听函数。   
这类监听函数的主要特征：   
1、短时间内连续多次重复触发；   
2、大量的DOM操作。

**意义：**在用户察觉范围外，降低函数调用的频率，从而提升性能

## 函数节流的原理 ##

函数节流的原理挺简单的，那就是定时器。当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就这样。

具体代码的实现，看到一个不错的方法：impress用的一个封装函数：

它使用闭包的方法形成一个私有的作用域来存放定时器变量timer。而调用方法为

window.onresize = throttle(myFunc, 100);

如果想要了解更多，参考文章：[http://www.alloyteam.com/2012/11/javascript-throttle/][http_www.alloyteam.com_2012_11_javascript-throttle]

[http_www.alloyteam.com_2012_11_javascript-throttle]: http://www.alloyteam.com/2012/11/javascript-throttle/