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)
posted on 2024-10-16 16:16  awite  阅读(9)  评论(0编辑  收藏  举报