为了避免在用户反复点击按钮时重复发送请求，可以采取以下几种常见的策略：
1. 禁用按钮（按钮状态控制）
在请求发送期间禁用按钮，防止用户在请求完成前再次点击。
实现方式：
- 在按钮点击时，将按钮设置为 禁用状态（
disabled）。 - 请求完成后，恢复按钮的启用状态。
示例代码：
<button id="myButton" onclick="handleClick()">点击发送请求</button>
<script>
let isRequestInProgress = false;
function handleClick() {
if (isRequestInProgress) return; // 如果请求正在进行中，阻止重复点击
isRequestInProgress = true;
const button = document.getElementById('myButton');
button.disabled = true; // 禁用按钮
// 模拟发送请求
setTimeout(() => {
console.log('请求发送成功');
// 请求完成后恢复按钮状态
isRequestInProgress = false;
button.disabled = false;
}, 2000); // 模拟2秒的请求时间
}
</script>说明：
isRequestInProgress用来标记当前是否正在发送请求，防止重复点击。- 请求过程中禁用按钮，直到请求完成后再启用。
2. 使用节流（Throttle）
节流是通过限制单位时间内某个操作的执行次数，适合在短时间内多次触发点击事件的场景。
实现方式：
- 利用 节流函数（
throttle），确保在一定时间内只触发一次请求。
示例代码：
<button id="myButton" onclick="throttle(handleClick, 2000)">点击发送请求</button>
<script>
let lastClickTime = 0;
function throttle(func, delay) {
const currentTime = new Date().getTime();
if (currentTime - lastClickTime >= delay) {
lastClickTime = currentTime;
func(); // 执行请求
}
}
function handleClick() {
console.log('请求发送');
// 在这里添加实际的请求代码
}
</script>说明：
throttle函数限制了按钮点击的频率，防止短时间内多次触发。2000毫秒（2 秒）是点击的最小间隔，单位时间内只允许一次请求。
3. 防抖（Debounce）
防抖是指在短时间内多次触发事件时，只执行最后一次触发。它适用于用户快速点击时，确保只发送最后一次请求。
实现方式：
- 使用 防抖函数（
debounce），在点击事件触发后等待一段时间，如果在这段时间内没有再次点击，就执行请求。
示例代码：
<button id="myButton" onclick="debounce(handleClick, 2000)">点击发送请求</button>
<script>
let timeout;
function debounce(func, delay) {
clearTimeout(timeout);
timeout = setTimeout(func, delay); // 延迟执行
}
function handleClick() {
console.log('请求发送');
// 在这里添加实际的请求代码
}
</script>说明：
debounce确保用户点击按钮时，只有最后一次点击会触发请求。2000毫秒的延迟，意味着用户在点击后 2 秒内没有再次点击，才会触发请求。
4. 使用请求去重（请求 ID 或标志位）
当请求已经发出时，使用标志位来避免在请求完成之前再次发送相同请求。
实现方式：
- 使用 请求唯一标识符 或 标志位 来判断是否已经发送了请求。
示例代码：
<button id="myButton" onclick="handleClick()">点击发送请求</button>
<script>
let isRequestInProgress = false;
function handleClick() {
if (isRequestInProgress) return; // 如果请求正在进行，阻止重复请求
isRequestInProgress = true;
// 模拟发送请求
setTimeout(() => {
console.log('请求发送成功');
// 请求完成后恢复标志位
isRequestInProgress = false;
}, 2000); // 模拟2秒的请求时间
}
</script>说明：
isRequestInProgress用于检查当前是否有请求在处理中，避免重复请求。
总结：
- 禁用按钮：通过禁用按钮来避免用户在请求处理中重复点击。
- 节流：限制单位时间内按钮的点击频率。
- 防抖：只在最后一次点击后触发请求。
- 请求去重：通过标志位或请求 ID 来避免重复请求。
根据你的需求，选择最适合的方案来防止重复请求。
最后更新于: