分布式接口防抖终极解决方案，如何避免重复提交！

防抖技术

防抖（Debouncing）是一种编程技术，用于控制事件处理函数的执行频率。在用户与界面交互频繁的场景中，比如连续滚动、连续输入等，如果每次交互都触发事件处理函数，可能会导致性能问题或不必要的数据库操作。

防抖技术通过设定一个延迟时间，在这段时间内，即使触发了多次事件，事件处理函数也只会在延迟时间结束后执行一次。如果在这个延迟时间内再次触发事件，那么之前的延迟会被重置，重新开始计算延迟时间。这样，只有最后一次事件触发后，延迟时间结束后，事件处理函数才会执行。

防抖技术常用于以下场景

解决方案

在Web系统的交互设计中，表单提交是一个核心功能，但若不加以适当控制，用户误操作或网络的不稳定性都可能导致同一请求被重复发送，从而产生冗余数据。为了应对这一挑战，我们可以从两个层面进行优化：

前端防抖 ：通过在用户界面上实现按钮的加载状态（loading state），可以有效防止用户因手抖而重复点击，从而避免前端生成多个请求。

后端防抖 ：对于由网络波动引起的请求重发问题，前端的控制措施显得不够充分。因此，后端需要引入防抖逻辑，通过识别请求的唯一性（例如使用请求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 表结构

CREATETABLE`demo_user` (
`id`int(11) NOTNULL AUTO_INCREMENT,
`username`varchar(32) NOTNULL,
`mobile`char(13) NOTNULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;


分布式锁

RedisLock.php

<?php
/**
 * @desc RedisLock.php 描述信息
 * @author Tinywan(ShaoBo Wan)
 * @date 2024/6/23 8:31
 */
declare(strict_types=1);
namespaceapp\common\service;
usesupport\Redis;
classRedisLock
{
// 分布式并发锁
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)
*/
publicstaticfunctiongetLockWithTimeout(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);
}
returnfalse;
}
/**
* @desc: 释放锁
* @param string $lock_name
* @param string $identifier
* @return bool
* @author Tinywan(ShaoBo Wan)
*/
publicstaticfunctionreleaseLock(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) {
returntrue;
}
break;
}
returnfalse;
}
}





业务代码实现

<?php
/**
 * @desc Demo.php 描述信息
 * @author Tinywan(ShaoBo Wan)
 * @date 2024/6/23 20:14
 */
declare(strict_types=1);
namespaceapp\controller;
useapp\common\service\RedisLock;
usesupport\Request;
usesupport\Response;
useTinywan\ExceptionHandler\Exception\BadRequestHttpException;
useTinywan\ExceptionHandler\Exception\ServerErrorHttpException;
classDemoController
{
/**
* @desc 用户添加
* @param Request $request
* @return Response
* @throws BadRequestHttpException
* @throws ServerErrorHttpException
* @author Tinywan(ShaoBo Wan)
*/
publicfunctionuserAdd(Request $request): Response
{
$param = $request->post();
/** 锁名称 */
$lockName = (string) $param['mobile'];
/** 尝试获取抢占锁标识 */
$lockIdentifier = RedisLock::getLockWithTimeout($lockName);
/** 没有拿到锁说明已经有了请求了 */
if (false === $lockIdentifier) {
thrownew BadRequestHttpException('您的操作太快啦！请不要连续点击提交');
}
try {
/** 进行业务处理 */
\think\facade\Db::table('demo_user')->insert($param);
/** 进行业务处理 */
} catch (\Throwable $throwable) {
/** 释放锁 */
RedisLock::releaseLock($lockName, $lockIdentifier);
thrownew ServerErrorHttpException('系统异常：' . $throwable->getMessage());
}
/** 释放锁 */
RedisLock::releaseLock($lockName, $lockIdentifier);
return json(['code' => 200, 'msg' => 'success']);
}
}




RedisLock的核心思路就是抢锁，当一次请求抢到锁之后，对锁加一个过期时间，在这个时间段内重复的请求是无法获得这个锁。

验证分布式锁

正确提交

后端异常提交

后端未响应之前提交

相同时间段内重复，锁释放剩余时间