前端开发之JavaScript篇——防抖在DOM操作中的应用

平时浏览网页时，往往避免不了使用鼠标点击或键盘敲字，这些动作事件在网页开发中，可以称DOM事件，DOM事件可以处理页面与用户进行交互，这期间也离不开对元素事件的监听。那么，这篇文章主要介绍在元素事件监听期间的防抖与节流操作。

什么是防抖

防抖，指在触发事件后，再过 n 秒后再执行回调函数；如果在这 n 秒内之前触发的事件再次被触发，则重新计时。这可以使用在一些点击请求事件、失焦事件、聚焦事件等上面，避免因为用户的操作而触发相同事件请求。

为何需要防抖

这里可以举登录或注册时验证事件的监听input输入框的例子，在我们输入用户名时，为了提高用户体验，input输入框往往会有监听事件，即每输入一个字母会字都进行验证判断，相关代码如下：

//html相关代码 //JS相关代码 const input=document.querySelector("input") input.addEventListener("input",e=>{     console.log(e.target.value) })

从结果可以看到，我们在输入框每输入一个字母时，在console输出事件就触发一次，如果是注册时要验证输入的用户名是否已存在，则需要向服务器发送请求验证，那么，每输入一个字母，则发送一次请求，一个用户名10个字母，则发送10次请求，浪费网路带框和服务器资源。

所以，对于这类连续触发事件，我们需要做“防抖”处理。

如何防抖

在设置防抖时，我们可以为连续触发事件设置在一个合理的时间内执行，避免在这时间内，重复执行相同事件操作。

设置时间则可以用定时器setTimeout()，相关代码如下：

const input=document.querySelector("input") input.addEventListener("input",e=>{     let T =setTimeout(()=>{         console.log(e.target.value)     },2000) })

从结果可以看到，在设置定时器后，console输出的用户名比较完整了，但还是不能解决减少事件执行次数，在重新触发事件后，先前的事件还是会执行，为此，需要在重新触发事件后，清理先前的事件，相关代码如下：

const input=document.querySelector("input") let T=null input.addEventListener("input",e=>{     if(T){         clearTimeout(T) T=null     }     T =setTimeout(()=>{          console.log(e.target.value)          },2000) })

从结果可以看到，这次console输出这有一次，相应地，我们可以把console输出事件换成其他点击点击事件等，这样，在注册验证时，就可以较少向服务器发送请求的次数了。

好了，这篇防抖就介绍到这，喜欢的可以哦！

软件开发 JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。