首页 > 其他分享 >防止按钮多次连续点击

防止按钮多次连续点击

时间:2024-10-16 16:11:11浏览次数:5  
标签:resolve console log isSubmitting 点击 防止 按钮 return 请求

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)

标签:resolve,console,log,isSubmitting,点击,防止,按钮,return,请求
From: https://www.cnblogs.com/an31742/p/18470196

相关文章

  • Qt弹窗,点击非弹窗区域外,自动隐藏弹窗;
    //下面三个函数监听全局的隐藏事件,为了保证客户端不可见的时候日历隐藏boolCPlaybackCalendarWidget::eventFilter(QObject*watched,QEvent*eve){if(eve->type()==QEvent::ApplicationStateChange)//状态改变{if(qApp->a......
  • 博客搭建之路:hexo使用next主题博客侧边栏标题点击不跳转
    hexo使用next主题博客侧边栏标题点击不跳转hexo版本5.0.2npm版本6.14.7next版本7.8.0本着我肯定不是第一个出这个问题的人,去github上找了找,果然我不是第一个好吧,也跟着改吧(修改themes/next/source/js/utils.js),找到registerSidebarTOC函数registerSidebarTOC:functio......
  • 单纯自我记录一下 如何用服务器跑自己的代码 防止忘记
    刚开始接触租服务器跑代码,之前的是LapTop4060显存不够用,随记下来防止忘记。第一步:找到自己心意的服务器网站(蓝耘)https://cloud.lanyun.net/#/registerPage?promoterCode=点击控制台——>容器实例——>租用新实例——>选择自己心仪的服务器,建议选择剩余数量多的,免得你关机后下......
  • c++中,经常需要用来获取用户输入的写法,或者暂停【防止终端退出】
    目录1.使用`cin.get()`暂停程序2.使用`std::cin.ignore()`结合`std::cin.get()`暂停程序3.使用`system("pause")`(仅限Windows)4.使用循环和`cin.get()`结合等待任意输入5.使用`cin>>`获取用户输入为了防止终端窗口在程序结束后立即关闭,可以使用一些方......
  • vue3 做个点击拖拽的的按钮
    //视图层<divclass="regularAI"ref="draggableDiv":style="{top:`${position.y}px`,left:`${position.x}px`}"> <span@mousedown="startDrag">{{isDragging?'拖拽中':'点击拖拽'}}</span&......
  • DevExpress WinForms中文教程:Data Grid - 如何点击获取信息?
    在使用DevExpressWinForms的DataGrid之类控件时,可能需要实现自定义用户交互,例如显示数据行的上下文菜单,或者在双击一行时调用编辑表单。在这些情况下,您需要在指定的坐标处标识网格元素。在本教程中,您将学习如何获取此信息。首先将显示工具提示,指示当前在鼠标光标下的是哪个......
  • 【电商搜索】现代工业级电商搜索技术-中科大-利用半监督学习改进非点击样本的转化率预
    【电商搜索】现代工业级电商搜索技术-中科大-利用半监督学习改进非点击样本的转化率预测0.论文信息RecSys24:UtilizingNon-clickSamplesviaSemi-supervisedLearningforConversionRatePrediction@inproceedings{huang2024utilizing,title={UtilizingNon-cli......
  • Flutter基础组件(6):单选按钮、复选框、单选开关
    在移动应用开发中,单选和复选是常见的用户交互模式,用于选择一个或多个选项。Flutter提供了一些内置的组件和机制,方便我们实现单选和复选功能。本文将介绍Flutter中的单选按钮(RadioButton)和复选框(Checkbox)的使用方法和示例。一、单选按钮(RadioButton)单选按钮是一种用户界面组件......
  • 【unity】内置鼠标监听方法(小白版)--当鼠标放置到技能按钮处显示该技能的描述
    为了实现鼠标放置到技能按钮处显示该技能描述的效果,参考了许多资料,由于我是初学者,研究了许久才看明白,现在分享一下学习心得。效果展示图代码如下usingUnityEngine;usingUnityEngine.EventSystems;usingUnityEngine.UI;publicclassSkillDataDisplay:MonoBehaviou......
  • vscode git 提交不进行commit 校验按钮开启
    第一种方式设置里面搜索gitverify,然后打钩然后git提交这里就有不校验的按钮了第二种方式直接setting.json里添加配置"git.allowNoVerifyCommit":true,......