js防抖节流的深入讲解

前言：

当我们进行页面事件绑定时，我们经常需要执行节流处理，例如，当鼠标异步点击执行一个异步请求时，我们需要使其在上次没有执行时无法再次点击，或者绑定滚动事件。当dom判断连续触发时，必须以一定的频率执行。

本文主要介绍js防抖和节流的相关内容，分享给大家参考。下面的话就不多说了，我们来看看详细的介绍

0.介绍

首先，举个例子：

在输入框中输入后模拟ajax查询请求，不添加防抖和节流效果，完整的可执行代码附后：

！doctype html lang=' en ' head meta charset=' utf-8 ' title no anti-shake/title style type=' text/CSS '/style script type=' text/JavaScript ' window . onload=function(){//Simulate Ajax request function Ajax(content){ console . log(' Ajax request ' content)}让输入正常=document . getelementbyid(' normal ')；input normal . addeventlistener(' key up '，Function(e){ Ajax(e . target . value)})}/script/head body div 1。无防抖输入：输入类型=' text ' name=' normal ' id=' normal '/div/body/html效果：输入框输入一个，会触发一个Ajax请求(这里是控制台)

无防抖和节流

缺点：请求的资源被浪费，可以通过增加防抖和节流来优化。

本文将介绍什么是防抖和节流，它们的应用场景和实现方法。防抖和节流是为了解决短时间内大量触发导致的响应速度跟不上触发频率，以及延迟、假死或卡顿现象等性能问题而设计的。但是两者的业务需求不同，所以实现的原则也不同。让我们详细看看它们。

1.防抖(去抖)

1.1什么是防抖

在事件触发n秒后执行回调函数，如果在n秒内再次触发，则重新计时。

1.2应用场景

(1)用户在输入框中连续输入一串字符后，只会执行输入后的最后一个ajax查询请求，可以有效减少请求数量，节省请求资源；

(2)调整窗口的大小和滚动事件，不断调整浏览器的窗口大小，或者在滚动时触发相应的事件，稳定图像使其只触发一次；

1.3实现

或者上面的列表，在这里加防抖优化一下。完整的代码如下：

！doctype html lang=' en ' head meta charset=' utf-8 ' title添加防抖/title style type=' text/CSS '/style script type=' text/JavaScript ' window . onload=Function(){//模拟ajax请求Function Ajax(content){ console . log(' Ajax请求' content)} fun bounce(fun，Delay) {return function (args) {//获取函数的作用域和变量let=this _ args=args//每次触发事件时然后重写set timeout并调用clear time out(fun . id)fun . id=set time out(function(){ fun . call(that，_ args)}。delay) } }让input deboake=document . getelementbyid(' deboake ')让deboakejax=deboake(Ajax，500)input deboake . addeventlistener(' key up '，Function(e){ deboakejax(e . target . value)})}/script/head dy div 2。添加防抖后的输入：输入类型=' text ' name=' debook ' id=' debook '/div/body/html代码描述：

1.每次触发事件时，当前计时器将被清除，然后超时调用将被重置，即重新计时。这将导致每个高频事件取消之前的超时调用，导致事件处理程序没有被触发；

2.只有当高频事件停止时，最后一个事件触发的超时调用才能在延迟时间后执行；

效果：

添加防抖后，继续在输入框输入时，不会发送任何请求，只有在指定时间间隔内没有再次输入时才会发送。如果首先停止输入，但在指定的时间间隔内再次输入，计时将再次触发。

添加防抖

2.油门(油门)

2.1什么是节流

指定单位时间。在这个单位时间内，触发事件的回调函数只能执行一次。如果一个事件在同一单位时间内被触发多次，则只有一次可以生效。

2.2应用场景

(1)鼠标连续触发一个事件(如点击)，每单位时间只触发一次；

(2)在无限页面加载的场景下，用户在滚动页面时需要定期发送ajax请求，而不是在用户停止滚动页面时请求数据；

(3)监控滚动事件，如是否滑到底，自动多载，通过油门判断；

2.3实现

和上面的列表一样。在这里，添加节流来优化它。完整的代码如下：

！doctype html lang=' en ' head meta charset=' utf-8 ' title add throttling/title style type=' text/CSS '/style script type=' text/JavaScript ' window . onload=function(){//Simulate Ajax request function Ajax(content){ console . log(' Ajax request ' content)} function throttle(fun，delay) { let last，defer timer return function(args){ let那=thislet _args=参数；让now=new Date()；if(上一次现在最后一次延迟){ cleartime out(DeereTimer)；detertimer=setTimeout(function(){ last=now；fun.apply(即，_ args)；}，delay)} else { last=now；fun.apply(即，_ args)；} } }让throttrajax=throttle(Ajax，1000)让inputThrottle=document . getelementbyid(' throttle ')inputThrottle . addeventlistener(' key up '，Function(e){ throttle Ajax(e . target . value)})}/script/head dy div 3。节流后添加输入：输入类型=' text ' name=' throttle ' id=' throttle '/div/body/html效果：实验表明，连续输入时会安装代码中的设置，每

添加节流

3.摘要

总结防抖和节流的区别：

-效果：

功能防抖在一定时间内只执行一次；但是，功能节流是间隔执行的，无论事件触发的频率有多高，都会保证在指定时间内真正的事件处理功能执行一次。

-原则：

防抖是维护一个定时器，规定延迟时间后会触发该功能，但如果在延迟时间内再次触发，则清除当前定时器，然后重置超时调用，即重新计时。这样，只能触发最后一个操作。

节流通过判断是否达到一定时间触发功能。如果没有达到指定的时间，则使用计时器进行延迟，计时器将在下一个事件中重置。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。