uniapp 输入框防抖节流_JS中防抖与节流

防抖

概念：事件被触发 指定时间 后再执行回调函数，如果在 指定时间 内又被触发，则会重新计时，不会执行回调函数

应用场景：用户在输入框连续不停的输入内容，只有在输入完成指定时间后才去调用Ajax查询请求，这样可以减少不必要的请求次数，节约资源提高性能。

模拟输入框查询，执行下面代码。

在页面输入框输入字符，控制台都会一直打印结果。

可以看出，这种情况下，每按下一个键盘键，就输出了一次。短短的一段内容，输出了10次，如果每按下一次就是一次ajax查询请求的话，短短几秒钟就发出10次求了，在性能上的消耗可想而知。

所以为了提升性能和用户体验，这里就需要加入防抖来优化。

防抖的原理：

维护一个计时器，当触发查询请求时，规定在指定时间后触发函数，如果在指定时间内再次触发的话，会清除当前的计时器，然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

添加好防抖代码后，运行看看效果。

显而易见，当还在不停输入内容的时候，不会发起调用请求函数，只有输入完成后停止了指定时间，才发起请求，这样就大大节约了不必要的请求资源。

防抖优化增强版：

假如我不断地输入，输入了很多内容，且每两次之间的输入间隔时间都小于自己设置的time，那么，这个 getAjax 搜索请求函数就一直得不到调用。实际上，更希望看到的是当一直输入达到某个最大时间值时，一定要执行一次这个搜索函数。所以就有了防抖增强版：

这样我们在运行代码看看效果。

可以看出，即使一直在输入内容，当超过设定的最大输入时间后，就会执行一次请求，这样就不会造成一直输入而没有任何响应的尴尬局面。

以上就是防抖的奥秘。接下来再来看看节流吧。

---

节流

概念：规定在单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内事件被触发多次，只有一次能生效。

应用场景：游戏时键盘或鼠标疯狂输入，但技能并不会疯狂输出。

有了防抖的概念，就很好理解节流了，其原理和防抖增强版很类似，也可以说防抖的增强版就是节流。

看看效果：

在输入框拼命的输入内容，控制台依然每隔固定的时间打印一次，和我们打游戏时多么像呀

以上就是节流与防抖的说明

---

对比

函数防抖是某一段时间内只执行一次事件处理函数。

函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内执行一次事件处理函数。