JS中的事件防抖

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、什么事件防抖?
  • 二、手写代码实现JS中的事件防抖
  • 总结


一、什么事件防抖?

事件防抖是JavaScript 一种常见的技术,目的是帮助减少事件向服务器的响应频率。它的原理是在函数中写一个延迟执行的定时器,但一定要把定时器先声明,并且在setTimeout之前要写一个clearTimeout去清除定时器,这个作用是如果在延迟时间内再次触发事件(再次执行函数),则重新计时,在延迟时间结束之前,如果没有再次触发事件,则执行回调函数。

以一个输入文本框为例,实现一下这个原理


提示:以下是本篇文章正文内容,下面案例可供参考

二、手写代码实现事件防抖?

以输入文本框为例,要获取文本框中的输入,并显示在文本框下方

JS中的事件防抖_第1张图片

 

JS中的事件防抖_第2张图片

不使用防抖,可以看到,控制台频繁输出,假设每一次输出都是与后台进行一次交互,执行这么多次会影响性能,那么考虑减少请求次数,防抖技术就产生了,也就是当触发请求过于频繁时,只要最后一次请求的操作就叫做防抖
 

代码如下:




JS中的事件防抖_第3张图片

 可以看到,使用防抖后,控制台输出省略了中间过程,也就是事件请求只有最后一次。

总结

事件防抖的好处是,如果事件触发频率很高,可以避免每次都执行回调函数,从而减少不必要的操作。这在用户输入时比较有用,例如,当用户在输入框中输入文本时,可以使用事件防抖来减少对服务器的请求频率。
 

你可能感兴趣的:(javascript,前端,vue.js,开发语言)