在日常开发中，有很多场景需要用到节流功能和防抖功能。比如实现输入框的模糊查询，因为需要轮询ajax，影响浏览器性能，所以需要使用节流功能；核实手机号码、姓名等。我们往往只需要验证一次。这时，我们需要使用防抖功能；然而，互联网上的许多材料并不具体，也不容易理解。今天看了一些资料，就简单说说我对节流功能和防抖功能的理解，希望能帮助大家理解；

节流功能

顾名思义是节省流量和内存性能的功能，可以理解为性能优化方案；

比如：一个水龙头一直在滴水，可能一次掉很多水，但是我们要控制它的频率，让它每1000毫秒掉一滴水。此时，我们可以使用throttle函数来控制它(可以简单地理解为类似于周期性计时器)

Js代码(可以直接复制到编辑器中查看效果):

//首先定义一个全局变量var canRun=true//当浏览器窗口大小改变时，也就是重新计算窗口大小时，window.onresize=function(){//是倒排的，if(！CanRun){//直接返回，下面的代码不执行return}//这是什么时候能运行才是真的。然后给false赋值canRun=false//为轮询操作setTimeout(函数(){///这是console.log要做的事情('函数节流')//最后记得重新赋值true，继续让他取逆canRun=true//每1000毫秒执行一次，也就是每1秒}，1000)}效果图如下：

反沙克函数

防抖功能与油门功能类似，但略有不同。防抖功能的定义是事件触发完成后延迟触发，只触发一次；如果在触发完成前再次触发，延迟将再次刷新。简单理解为(如果没有触发事件，就不会执行，只执行一次，也就是计时器最后一次离开)

比如：如果有弹簧，你一直压下去，只要你不松手，它就不会弹出来，弹簧只会在你松手的那一刻弹出来；防抖功能也是如此，只要事件触发没有结束就不执行，事件触发结束后只延迟一次；

Js代码(可以直接复制到编辑器中查看效果):

//定义方法，即fun(){ console . log(' on resize ')}//定义事件触发时要执行的方法。这两个参数是要做的事情和计时器的毫秒数。函数去抖(fn，delay){//定义一个变量作为以后要清除的对象var句柄；//这里用的是闭包，一个函数返回另一个函数，变量是相互有符号的，这样垃圾收集机制就不会破坏句柄变量返回函数(){//这里必须清除之前的定时器。然后新建一个定时器clearTimeout(handle) //最后这个定时器只会执行一次，也就是事件触发完成后，500毫秒后才会触发(这里的变量赋值是为了和定时器建立连接，分配一个地址，所以必须重新分配给handle handle=settimeout(function(){ fn()})。添加监听事件调整窗口大小。向浏览器添加eventlistener ('resize '，去抖(fun，500))；效果图如下：

总结：

1.防抖功能和节流功能都是用来提升性能优化和用户体验的。

2.防抖功能只会执行一次，也是最后一次触发，而油门功能会定时执行多次；

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。