JavaScript 中的 防抖

节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖和节流

防抖:

1. "防抖"是什么

首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。
假设: 我有一个标签,并想获得输入时的值,代码是这样的:

我们输入一些值之后,得出的效果是这样的:

防抖.gif

我们只是输入了 "前端"两个字,控制台中就打印了很多次,事件就执行了很多次。假设我们每一次输入都是和后台进行一次数据交互的话,那执行这么多次事件就会太影响性能了。
那么我们考虑的就是怎样减少与后台数据库请求的次数,那么防抖就应用而生了。
也就是说 用户触发时间过于频繁,只要最后一次请求的操作就叫做防抖

2. 怎么做

用户虽然触发了多次,但是我们想要的只是用户操作的最后一次,那么应该怎样去实现呢?
其实可以把问题简单化,我们只要隔一个固定的事件去获取一次用户输入的值,那么事件触发的次数就会减少,这个就是防抖的实现。
现在用代码去实现:

用 time 来控制事件的触发,然后建立一个延时器,用固定事件500ms来控制事件的触发,输出this.value ,那么之前,需要进行一个判断,判断time是不是有值,如果有值就去清掉time,然后下面的代码又重新赋值给time`。
防抖之后的效果图:

防抖实现.gif

优化:

防抖实现了,但是新的问题又来了,我们定义了一个全局变量time,而且防抖的代码和业务逻辑混到了一起了,那么这个代码就非常不利于维护。那么我们应该怎么解决这个问题呢?这时可以用闭包来封装一个防抖的函数

这样,一个真正工程化的防抖就完成了