## 防抖技术 防抖（Debouncing）是一种编程技术，用于控制事件处理函数的执行频率。在用户与界面交互频繁的场景中，比如连续滚动、连续输入等，如果每次交互都触发事件处理函数，可能会导致性能问题或不必要的数据库操作。 防抖技术通过设定一个延迟时间，在这段时间内，即使触发了多次事件，事件处理函数也只会在延迟时间结束后执行一次。如果在这个延迟时间内再次触发事件，那么之前的延迟会被重置，重新开始计算延迟时间。这样，只有最后一次事件触发后，延迟时间结束后，事件处理函数才会执行。 > 防抖技术常用于以下场景 - 搜索框输入：用户连续输入时，只有输入停止一段时间后才触发搜索请求。 - 窗口调整大小：用户调整窗口大小时，只有调整结束后才执行相关操作。 - 滚动事件：用户滚动页面时，只有滚动停止一段时间后才进行数据处理。 ### 解决方案 在Web系统的交互设计中，表单提交是一个核心功能，但若不加以适当控制，用户误操作或网络的不稳定性都可能导致同一请求被重复发送，从而产生冗余数据。为了应对这一挑战，我们可以从两个层面进行优化： 1. **前端防抖**：通过在用户界面上实现按钮的加载状态（loading state），可以有效防止用户因手抖而重复点击，从而避免前端生成多个请求。 2. **后端防抖**：对于由网络波动引起的请求重发问题，前端的控制措施显得不够充分。因此，后端需要引入防抖逻辑，通过识别请求的唯一性（例如使用请求ID或时间戳），确保即便在网络不稳定的情况下，同一请求也不会被重复处理。 防抖策略是确保Web系统稳定性和数据一致性的关键。前端的防抖措施提升了用户体验，而后端的防抖措施则保障了数据的准确性和系统的健壮性。两者结合，可以构建一个更加稳定和用户友好的Web应用环境。通过这种双重保障，我们可以有效地减少因误操作或网络问题导致的重复请求，维护系统的高效运行。 ## 防抖场景 在Web系统中，并非所有接口都需要防抖，但以下类型的接口通常可以从防抖机制中获益： #### 表单输入场景 * **搜索框输入**：用户在搜索框中输入时，可能会触发实时搜索或自动完成功能。防抖可以减少因快速输入导致的频繁请求。 * **表单输入**：尤其是那些包含多个字段或需要进行复杂验证的表单，防抖可以避免用户因误操作而重复提交。 #### 按钮点击场景 按钮点击类接口，如提交表单或保存设置，用户在操作过程中可能会因各种原因频繁点击按钮，这不仅可能影响用户体验，还可能导致不必要的服务器请求，增加系统负担。 为了防止用户因急促操作而导致的频繁请求。通过设置一个短暂的等待时间，只有在用户停止点击达到预设的时间阈值后，才会触发实际的请求发送。这种方法不仅减少了服务器的负担，也避免了因重复请求而可能产生的数据错误或冲突。 #### 滚动加载场景 在滚动加载类接口中，如下拉刷新、上拉加载等，用户的操作往往伴随着连续的滚动动作。为了提升系统效率并避免因频繁触发而导致的性能问题。通过设定一个合理的时间间隔，只有在用户滚动动作停止一段时间后，系统才会执行请求发送，从而实现智能的请求管理。 ## 如何防抖 ### 使用共享缓存  *图片来源：https://developer.aliyun.com/article/1541251* ### 使用分布式锁  *图片来源：https://developer.aliyun.com/article/1541251* 常见的分布式组件有Redis、Zookeeper等，但结合实际业务来看，一般都会选择Redis，因为Redis一般都是Web系统必备的组件，不需要额外搭建。 ## 代码实现 模仿一个用户添加接口 目前数据库表中没有对`mobile`字段做UK唯一索引限制，这就会导致每调用一次`userAdd`就会创建一个用户，即使`mobile`相同。 `demo_user` 表结构 ```sql CREATE TABLE `demo_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(32) NOT NULL, `mobile` char(13) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` ### 分布式锁 RedisLock.php ``` <?php /** * @desc RedisLock.php 描述信息 * @author Tinywan(ShaoBo Wan) * @date 2024/6/23 8:31 */ declare(strict_types=1); namespace app\common\service; use support\Redis; class RedisLock { // 分布式并发锁 const DISTRIBUTED_CONCURRENT_LOCK = 'DISTRIBUTED_CONCURRENT_LOCK:'; /** * @desc: 获取锁 * @param string $lock_name * @param int $acquire_time * @param int $lock_timeout * @return bool|string * @author Tinywan(ShaoBo Wan) */ public static function getLockWithTimeout(string $lock_name, int $acquire_time = 3, int $lock_timeout = 20) { $identifier = md5($_SERVER['REQUEST_TIME'] . mt_rand(1, 10000000)); $lock_name = self::DISTRIBUTED_CONCURRENT_LOCK . $lock_name; $lock_timeout = intval(ceil($lock_timeout)); $end_time = time() + $acquire_time; while (time() < $end_time) { $script = <<<luascript local result = redis.call('setnx',KEYS[1],ARGV[1]); if result == 1 then return redis.call('expire',KEYS[1],ARGV[2]) elseif redis.call('ttl',KEYS[1]) == -1 then return redis.call('expire',KEYS[1],ARGV[2]) -- 续租（renew） else return 0 end luascript; $result = Redis::eval($script, 1, $lock_name, $identifier, $lock_timeout); if ($result === 1) { return $identifier; } usleep(100000); } return false; } /** * @desc: 释放锁 * @param string $lock_name * @param string $identifier * @return bool * @author Tinywan(ShaoBo Wan) */ public static function releaseLock(string $lock_name, string $identifier): bool { $lock_name = self::DISTRIBUTED_CONCURRENT_LOCK . $lock_name; while (true) { $script = <<<luascript if redis.call("get",KEYS[1]) == ARGV[1] then return redis.call("del",KEYS[1]); else return 0 end luascript; $result = Redis::eval($script, 1, $lock_name, $identifier); if ($result == 1) { return true; } break; } return false; } } ``` ### 业务代码实现 ``` <?php /** * @desc Demo.php 描述信息 * @author Tinywan(ShaoBo Wan) * @date 2024/6/23 20:14 */ declare(strict_types=1); namespace app\controller; use app\common\service\RedisLock; use support\Request; use support\Response; use Tinywan\ExceptionHandler\Exception\BadRequestHttpException; use Tinywan\ExceptionHandler\Exception\ServerErrorHttpException; class DemoController { /** * @desc 用户添加 * @param Request $request * @return Response * @throws BadRequestHttpException * @throws ServerErrorHttpException * @author Tinywan(ShaoBo Wan) */ public function userAdd(Request $request): Response { $param = $request->post(); /** 锁名称 */ $lockName = (string) $param['mobile']; /** 尝试获取抢占锁标识 */ $lockIdentifier = RedisLock::getLockWithTimeout($lockName); /** 没有拿到锁说明已经有了请求了 */ if (false === $lockIdentifier) { throw new BadRequestHttpException('您的操作太快啦！请不要连续点击提交'); } try { /** 进行业务处理 */ \think\facade\Db::table('demo_user')->insert($param); /** 进行业务处理 */ } catch (\Throwable $throwable) { /** 释放锁 */ RedisLock::releaseLock($lockName, $lockIdentifier); throw new ServerErrorHttpException('系统异常：' . $throwable->getMessage()); } /** 释放锁 */ RedisLock::releaseLock($lockName, $lockIdentifier); return json(['code' => 200, 'msg' => 'success']); } } ``` RedisLock的核心思路就是抢锁，当一次请求抢到锁之后，对锁加一个过期时间，在这个时间段内重复的请求是无法获得这个锁。 ### 验证分布式锁 > 正确提交  > 后端异常提交  > 后端未响应之前提交  > 相同时间段内重复，锁释放剩余时间