uniapp 输入框防抖节流_详细讲解节流和防抖

作为一个开发，我觉得节流和防抖的理念是非常重要，以前我有一篇文章通过举了两个例子来简单的说明了下什么是节流和防抖，今天我将更加详细的去分析说明这两个概念。

备注：有些代码较多的例子为了利于大伙阅读就采用代码图片的形式

举个例子

浏览器中某些计算和处理非常昂贵。比如当鼠标响应resize, touchmove,scroll等操作时，绑定的函数触发的频率会很高，如果该函数稍微复杂一些，响应速度会远远跟不上触发频率，便会出现卡顿，延迟，假死等现象。

下面来看一个例子，根据输入框输入的数据发送ajax请求：

 普通处理

普通处理：

复制代码普通处理结果如下：

如上图所见，在输入时会不断的发送请求，非常浪费资源。为优化性能，我们可以使用防抖或节流来防止函数被高频调用。

防抖Debounce

原理

在事件被触发n秒后，再去执行回调函数。如果n秒内该事件被重新触发，则重新计时。结果就是将频繁触发的事件合并为一次，且在最后执行。

例如

电梯5秒后会关门开始运作，如果有人进来，等待5秒，5秒之内又有人进来，5秒等待重新计时...直至超过5秒，电梯才开始运作。

使用场景

input输入数据时请求服务器等。

实现

每当事件触发，就去重置定时器。直至最后一次事件被触发，n秒后再去执行回调函数。

加入防抖结果如下：

节流Throttle

原理

规定一个时间n，n秒内，将触发的事件合并为一次并执行。

例如

电梯等第一个人进来之后，5秒后准时运作，不等待，若5秒内还有人进来，也不重置。

使用场景

resize，touchmove移动DOM，上拉列表加载数据等。

实现节流的三种方式

1、时间戳方式：

加入节流-时间戳结果如下：

2、定时器方式：

加入节流-定时器结果如下：

3、定时器 & 时间戳方式：

加入节流-定时器 & 时间戳结果如下：

小结

本文主要介绍了防抖与节流的实现方式以及原理。其中，防抖的核心思想是高频操作执行结束，n秒后仅执行一次；而节流是每隔一段时间就会执行一次。掌握了这两个要点，能让你的代码性能更上一层楼。谢谢