1、使用setTimeOut
- 使用两种方法第一种方法是就是在请求之前设置标识,请求之后修改标识。达到连续点击只掉一次请求
// 用于保存请求状态的标志位
let isSubmitting = false;
// 模拟一个异步请求
function sendRequest() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("请求成功");
}, 2000); // 模拟2秒的请求时间
});
}
// 处理按钮点击事件
function handleSubmit() {
// 检查标志位
if (isSubmitting) {
console.log("请求正在进行中,请稍后...");
return;
}
// 设置标志位
isSubmitting = true;
console.log("开始请求...");
// 发送请求
sendRequest().then(response => {
console.log(response);
}).catch(error => {
console.error(error);
}).finally(() => {
// 请求完成后重置标志位
isSubmitting = false;
console.log("请求完成,可以再次提交");
});
}
2、按钮防抖
const debounce = (fn, delay) => {
// 防抖
let timer
return function (...rest) {
timer && clearTimeout(timer)
timer = setTimeout(() => fn.apply(this, rest), delay)
}
}
const submit = debounce(() => {
sendRequest() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("请求成功");
}, 2000); // 模拟2秒的请求时间
});
}
}, 500)