1.功能节流阀

* *函数节流：一个函数一旦被执行，超过设定的执行周期后，才会被第二次执行。有一个功能需要频繁触发。为了优化性能，只有函数触发器才会第一次生效，之后就不生效了。

### 1.如何实现其原理是利用时间戳判断是否到了回调执行时间的时候，记录最后一次执行的时间戳，然后触发滚动事件每次执行回调。在回调中，判断当前时间戳与上次执行时间戳的时间间隔是否达到指定时间段，如果达到，则执行，更新上次执行的时间戳，以此类推；

函数throttle(fn，delay) {//记录最后一个函数被触发的时间，var last time=0；Return function() {//记录当前函数触发var nowTime=Date.now()的时间；If (nowTime-lastTime delay) {//修复问题这指向fn . call(this)；//同步时间lastTime=nowTime} } } document . onscroll=throttle(function(){ console . log('滚动事件是由' date.now())触发的)}，200)

### 2.函数节流的应用场景需要以一定的间隔触发回调，以控制函数调用的频率：

* DOM元素的拖放功能(mousemove)*搜索关联(keyup)*计算鼠标移动的距离(mousemove)* Canvas模拟画板功能(射击游戏的mousedown/keydown事件(单位时间只能发射一颗子弹)*监控滚动事件判断是否在页面底部自动加载更多：添加去反跳滚动后，只有用户停止滚动才会判断。如果是油门，只要页面滚动，就会间隔判断

二、防抖功能(去抖)

* *防抖功能：需要频繁触发的功能。在规定时间内，只有最后一次生效，前一次不生效。**

### 1.如何实施

原理是第一次调用一个函数，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用该函数时，它将清除前一个计时器，并设置另一个计时器。如果之前的定时器已经执行，这个操作就没有意义了。但是，如果之前的定时器没有被执行，实际上是被新的定时器代替，然后在一定的时间延迟后执行。

Button id='btn' button/Button脚本类型=' text/JavaScript '函数去抖(fn，delay){//记录上次延迟时间var timer=nullReturn function() {//清除最后一个delayer cleartimeout(定时器)timer=settimeout(函数(){fn。apply (this)}，Delay)} } document . getelementbyid(' BTN ')。onclick=去抖(function () {console.log ('click事件触发' date.now ())}，1000)/script

### 2.功能防抖的应用场景

对于连续事件响应，我们只需要执行一次回调：

*每次调整大小/滚动触发统计事件*文本输入验证(连续文本输入后发送AJAX请求验证，验证一次)

摘要

以上是边肖介绍的防止多次点击跳转、防止表单组件输入内容多次验证的功能(功能防抖)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！