分布式接口防抖终极解决方案，如何避免重复提交！
防抖技术
防抖（Debouncing）是一种编程技术，用于控制事件处理函数的执行频率。在用户与界面交互频繁的场景中，比如连续滚动、连续输入等，如果每次交互都触发事件处理函数，可能会导致性能问题或不必要的数据库操作。
防抖技术通过设定一个延迟时间，在这段时间内，即使触发了多次事件，事件处理函数也只会在延迟时间结束后执行一次。如果在这个延迟时间内再次触发事件，那么之前的延迟会被重置，重新开始计算延迟时间。这样，只有最后一次事件触发后，延迟时间结束后，事件处理函数才会执行。
防抖技术常用于以下场景
- 搜索框输入：用户连续输入时，只有输入停止一段时间后才触发搜索请求。
- 窗口调整大小：用户调整窗口大小时，只有调整结束后才执行相关操作。
- 滚动事件：用户滚动页面时，只有滚动停止一段时间后才进行数据处理。
解决方案
在Web系统的交互设计中，表单提交是一个核心功能，但若不加以适当控制，用户误操作或网络的不稳定性都可能导致同一请求被重复发送，从而产生冗余数据。为了应对这一挑战，我们可以从两个层面进行优化：
前端防抖：通过在用户界面上实现按钮的加载状态（loading state），可以有效防止用户因手抖而重复点击，从而避免前端生成多个请求。
后端防抖：对于由网络波动引起的请求重发问题，前端的控制措施显得不够充分。因此，后端需要引入防抖逻辑，通过识别请求的唯一性（例如使用请求ID或时间戳），确保即便在网络不稳定的情况下，同一请求也不会被重复处理。
防抖策略是确保Web系统稳定性和数据一致性的关键。前端的防抖措施提升了用户体验，而后端的防抖措施则保障了数据的准确性和系统的健壮性。两者结合，可以构建一个更加稳定和用户友好的Web应用环境。通过这种双重保障，我们可以有效地减少因误操作或网络问题导致的重复请求，维护系统的高效运行。
防抖场景
在Web系统中，并非所有接口都需要防抖，但以下类型的接口通常可以从防抖机制中获益：
表单输入场景
- 搜索框输入：用户在搜索框中输入时，可能会触发实时搜索或自动完成功能。防抖可以减少因快速输入导致的频繁请求。
- 表单输入：尤其是那些包含多个字段或需要进行复杂验证的表单，防抖可以避免用户因误操作而重复提交。
按钮点击场景
按钮点击类接口，如提交表单或保存设置，用户在操作过程中可能会因各种原因频繁点击按钮，这不仅可能影响用户体验，还可能导致不必要的服务器请求，增加系统负担。
为了防止用户因急促操作而导致的频繁请求。通过设置一个短暂的等待时间，只有在用户停止点击达到预设的时间阈值后，才会触发实际的请求发送。这种方法不仅减少了服务器的负担，也避免了因重复请求而可能产生的数据错误或冲突。
滚动加载场景
在滚动加载类接口中，如下拉刷新、上拉加载等，用户的操作往往伴随着连续的滚动动作。为了提升系统效率并避免因频繁触发而导致的性能问题。通过设定一个合理的时间间隔，只有在用户滚动动作停止一段时间后，系统才会执行请求发送，从而实现智能的请求管理。
如何防抖
使用共享缓存
使用分布式锁
常见的分布式组件有Redis、Zookeeper等，但结合实际业务来看，一般都会选择Redis，因为Redis一般都是Web系统必备的组件，不需要额外搭建。
代码实现
模仿一个用户添加接口
目前数据库表中没有对mobile字段做UK唯一索引限制，这就会导致每调用一次userAdd就会创建一个用户，即使mobile相同。
demo_user 表结构
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的核心思路就是抢锁，当一次请求抢到锁之后，对锁加一个过期时间，在这个时间段内重复的请求是无法获得这个锁。
验证分布式锁
正确提交
后端异常提交
后端未响应之前提交
相同时间段内重复，锁释放剩余时间
腾讯云开发者
