Frontend - 防止多次请求,避免重复请求
目录
一、避免重复执行的多种情况
(一)根据用途
(二)根据用户操作
二、具体实现
(一)“Ajax ”结合disabled (防止多次请求),避免多次点击重复请求
1. 适用场景
2. 解决办法
3. 示例
(二)unbind 和 bind(防止内存溢出),避免长按重复操作
1. 适用场景
2. 解决办法
3. 注意
4. 示例
(1)普通写法,会出现问题:长按时,会多次执行弹出框动作
(2)进阶写法,解决长按时多次执行的问题
(3)针对click、keydown(与keyup同理)
(三)setTimeout 防抖 ,避免多次重复操作
(四)setTimeout 节流 ,避免多次重复操作
一、避免重复执行的多种情况
(一)根据用途
1. 针对按钮点击事件:设置disable属性(执行第一次的操作)、利用bind和unbind(执行最后一次的操作)、loading(执行最后一次的操作)。
2. 针对输入框输入事件:防抖(执行最后一次的操作)
3. 针对滚动事件:节流(执行第一次的操作)
(二)根据用户操作
1. 针对无意识连续操作:利用bind和unbind、防抖、节流
2. 针对故意连续操作:设置disable属性、loading(当数据全部更新好了再让用户操作)
二、具体实现
(一)“Ajax ”结合disabled (防止多次请求),避免多次点击重复请求
1. 适用场景
同时执行多次相同操作。例如,短时间内执行多次点击事件,进行多个ajax请求。
2. 解决办法
在执行操作后,立马禁用操作按钮;在完成请求后,恢复按钮的可用状态。
3. 示例
// 第一种
$('#id_ok').attr("disabled", true); // 禁用按钮,在"传递数据给后端"前(ajax里,放在beforeSend方法中)
$('#id_ok').attr("disabled", false); // 恢复按钮的可用状态,在 "前端渲染"后(ajax里,放在complete方法中)// 第二种
$("#id_query_btn").attr({ disabled: "disabled" }); // 禁用按钮
$("#id_query_btn").removeAttr("disabled"); // 恢复按钮的可用状态
(二)unbind 和 bind(防止内存溢出),避免长按重复操作
1. 适用场景
在用户连续操作时,会重复请求多次。例如:点击时一直长按。
2. 解决办法
使用 unbind 和 bind,在用户连续操作时,只请求最后一次操作,前面重复的操作被 unbind 释放掉。
3. 注意
只是避免连续操作,但没有避免短时间内频繁操作。例如:点击时,只是避免了“长按”,但不能避免同时多次点击。
4. 示例
(1)普通写法,会出现问题:长按时,会多次执行弹出框动作
即,当一直长按时,keyup事件被多次绑定,执行多次事件。
$(document).keyup.(function(event){alert(event.which); //显示按键对应的数字编号
})
(2)进阶写法,解决长按时多次执行的问题
即,绑定keyup事件前,先解绑。
$("#id_ok").unbind("keyup").bind("keyup", function(event){if (event.keyCode == 13) {alert(event.keyCode);}
})
(3)针对click、keydown(与keyup同理)
$("#id_ok").unbind('click').bind('click', function () { } );
(三)setTimeout 防抖 ,避免多次重复操作
// 第一种 JavaScript的addEventListener
document.getElementById("id_ok").addEventListener("click", fn_debounce(excute_data, 1000));
// 第二种 jQuery的on()方法
$('#id_ok').on('click', fn_debounce(excute_data, 1000));
// 需执行的事件
function excute_data() {alert("测试"); }
/** * 防抖:某个时间期限(500毫秒)内,事件只执行一次。* @fn [function] 需要防抖的函数* @timeint [number] 毫秒,防抖期限
*/
function fn_debounce(fn, timeint) {let timeout; // 闭包,在定时方法作用域外部。会保留在返回的函数的闭包中,即保留上一次事件的处理状态,直到定时器完成执行。return function (e) {clearTimeout(timeout);// 清除上一次执行保留的timeout计时器timeout = setTimeout(() => {fn.apply(this, arguments);}, timeint ? timeint : 500); // 对该事件何时执行,重新设定计时器};
}
(四)setTimeout 节流 ,避免多次重复操作
// 第一种 JavaScript的addEventListener
document.getElementById("id_ok").addEventListener("click", fn_throttle(excute_data, 1000));
// 第二种 jQuery的on()方法
$('#id_ok').on('click', fn_throttle(excute_data, 1000));
// 需执行的事件
function excute_data() {alert("测试"); }
/** * 节流:某个时间期限(500毫秒)内,事件只执行一次。* @fn [function] 需要节流的函数* @timeint [number] 毫秒,节流期限
*/
function fn_throttle(fn, timeint) {let can_run=true; // 闭包,在定时方法作用域外部。会保留在返回的函数的闭包中,即保留上一次事件的处理状态,直到定时器完成执行。return function (e) {if(can_run){ // 用can_run变量控制是否执行fn函数fn.apply(this, arguments);can_run=false; setTimeout(() => {can_run=true;}, timeint ? timeint : 500);}};
}
相关文章:
Frontend - 防止多次请求,避免重复请求
目录 一、避免重复执行的多种情况 (一)根据用途 (二)根据用户操作 二、具体实现 (一)“Ajax ”结合disabled (防止多次请求),避免多次点击重复请求 1. 适用场景 2. 解决办法 3. 示例 &…...
RHCE的学习(22)
第四章 流程控制之条件判断 条件判断语句是一种最简单的流程控制语句。该语句使得程序根据不同的条件来执行不同的程序分支。本节将介绍Shell程序设计中的简单的条件判断语句。 if语句语法 单分支结构 # 语法1: if <条件表达式> then指令 fi #语法2&#x…...
【前端知识】简单讲讲什么是微前端
微前端介绍 一、定义二、背景三、核心思想四、基本要素五、核心价值六、实现方式七、应用场景八、挑战与解决方案 什么是single-spa一、核心特点二、核心原理三、应用加载流程四、最佳实践五、优缺点六、应用场景 什么是 qiankun一、概述二、特点与优势三、核心功能四、使用场景…...
AWS IAM
一、介绍 1、简介 AWS Identity and Access Management (IAM) 是 Amazon Web Services 提供的一项服务,用于管理 AWS 资源的访问权限。通过 IAM,可以安全地控制用户、组和角色对 AWS 服务和资源的访问权限。IAM 是 AWS 安全模型的核心组成部分,确保只有经过授权的用户和应…...
丹摩|丹摩助力selenium实现大麦网抢票
丹摩|丹摩助力selenium实现大麦网抢票 声明:非广告,为用户体验 1.引言 在人工智能飞速发展的今天,丹摩智算平台(DAMODEL)以其卓越的AI算力服务脱颖而出,为开发者提供了一个简化AI开发流程的强…...
基于Qt/C++/Opencv实现的一个视频中二维码解析软件
本文详细讲解了如何利用 Qt 和 OpenCV 实现一个可从视频和图片中检测二维码的软件。代码实现了视频解码、多线程处理和界面更新等功能,是一个典型的跨线程图像处理项目。以下分模块对代码进行解析。 一、项目的整体结构 项目分为以下几部分: 主窗口 (M…...
智慧理财项目测试文档
目录 幕布思维导图链接:https://www.mubu.com/doc/6xk3c7DzgFs学习链接:https://www.bilibili.com/video/BV15J4m147vZ/?spm_id_from333.999.0.0&vd_source078d5d025b9cb472d70d8fda1a7dc5a6智慧理财项目测试文档项目介绍项目基本信息项目业务特性系…...
R | 统一栅格数据的坐标系、分辨率和行列号
各位同学,在做相关性等分析时,经常会遇到各栅格数据间的行列号不统一等问题,下面的代码能直接解决这类麻烦。以某个栅格数据的坐标系、分辨率和行列号为准,统一文件夹内所有栅格并输出到新的文件夹。 代码只需要更改输入输出和ti…...
C++学习——编译的过程
编译的过程——预处理 引言预处理包含头文件宏定义指令条件编译 编译、链接 引言 C程序编译的过程:预处理 -> 编译(优化、汇编)-> 链接 编译和链接的内容可以查阅这篇文章(点击查看) 预处理 编译预处理是指&a…...
当你要改文件 但是原来的文件内容又不能丢失的时候,拷贝一份(备注原来的),然后添加后缀:.bak
当你要改文件 但是原来的文件内容又不能丢失的时候,拷贝一份(备注原来的),然后添加后缀:.bak !!!文件不要直接删除,若你以后要还原的话会找不到...
MATLAB神经网络(五)——R-CNN视觉检测
5.1 目标分类、检测与分割 在计算机视觉领域,目标分类、检测与分割是常用计数。三者的联系与区分又在哪呢?目标分类是解决图像中的物体是什么的问题;目标检测是解决图像中的物体是什么,在哪里的问题;目标分割时将目标和…...
mock.js:定义、应用场景、安装、配置、使用
前言:什么是mock.js? 作为一个前端程序员,没有mockjs你不感觉很被动吗?你不感觉你的命脉被后端那个男人掌握了吗?所以,我命由我不由天!学学mock.js吧! mock.js 是一个用于生成随机…...
【GAT】 代码详解 (1) 运行方法【pytorch】可运行版本
GRAPH ATTENTION NETWORKS 代码详解 前言0.引言1. 环境配置2. 代码的运行2.1 报错处理2.2 运行结果展示 3.总结 前言 在前文中,我们已经深入探讨了图卷积神经网络和图注意力网络的理论基础。还没看的同学点这里补习下。接下来,将开启一个新的阶段&#…...
Transformer中的Self-Attention机制如何自然地适应于目标检测任务
Transformer中的Self-Attention机制如何自然地适应于目标检测任务: 特征图的降维与重塑 首先,Backbone(如ResNet、VGG等)会输出一个特征图,这个特征图通常具有较高的通道数、高度和宽度(例如CHWÿ…...
2411rust,1.75.0
原文 Rust团队很高兴地声明推出Rust的新版本1.75.0. 如果你rustup安装了以前版本的Rust,你可如下取1.75.0: $ rustup update stable1.75.0稳定版中的功能 async fn和特征中的返回位置impl Trait. 指针字节偏移API 原始指针(*const T和*mutT)过去主要支持,T为单位的操作.如…...
远程办公新宠:分享8款知识共享软件
远程办公模式下,知识共享软件成为了团队协作和沟通的重要工具。以下是8款备受推崇的知识共享软件: 1、HelpLook AI知识库 简介:HelpLook是一款快速搭建AI知识库的系统,具备强大功能,如快速精准的知识检索、灵活定制的…...
3.9MayBeSomeAssembly
就是先从数组里,乘4得到正确地址 32(&s3),s3是基址,32是偏移量,就是先从数组里取出数到临时寄存器,然后再在临时寄存器上加上变量,最后再把临时寄存器上的变量存到数组里,偏移量࿰…...
i春秋-签到题
练习平台地址 竞赛中心 题目描述 题目内容 点击GUESS后会有辨识细菌的选择题 全部完成后会有弹窗提示 输入nickname后提示获得flag F12检查 元素中没有发现信息 检查后发现flag在控制台中 flag flag{663a5c95-3050-4c3a-bb6e-bc4f2fb6c32e} 注意事项 flag不一定要在元素中找&a…...
TypeScript 中扩展现有模块的用法
declare module 是 TypeScript 中用于扩展现有模块的特性。它允许开发者在已有模块的基础上,添加新的功能(比如扩展接口、添加类型声明等)。通过 declare module,可以将额外的声明合并到原模块中。以下是用法详解: 用…...
【报错记录】解决Termux中pulseaudio启动报错,报:E: [pulseaudio] main.c: Daemon startup failed.
前言 在尝试使用Termux-X11启动Minecraft过程中,不知道怎么回事原本好好的pulseaudio居然无法启动了,一直在报: E: [pulseaudio] main.c: Daemon startup failed. 重装了好几次也没用解决方案如下。 排除重复启动 如果pulseaudio之前已经…...
C12832 LCD嵌入式驱动库详解:mbed平台128×32点阵显示开发指南
1. C12832 LCD驱动库概述C12832_lcd 是专为 mbed 应用开发板(Application Board)板载液晶显示屏设计的嵌入式驱动库。该显示屏型号为 C12832,是一款 12832 点阵、单色、COG(Chip-on-Glass)结构的 STN 液晶模块…...
好用还专业!高效论文写作全流程AI论文网站推荐(2026 最新)
论文写作全流程可拆解为文献调研→选题/开题→大纲/初稿→文献综述→降重/去AI味→润色/格式→查重/投稿七大环节,以下工具按环节精准匹配,兼顾中文适配、降重能力、去AI痕迹、学术合规四大核心需求,覆盖免费/付费、通用/垂直场景。2026年AI论…...
CnDataSeed发布:中国科研工作者跳槽研究数据库(CAMRD)
一、数据简介 追踪学术流动,解析科研人才动力机制! 在中国科研生态快速演化的背景下,科研人才流动是科研创新与学术产出的关键驱动力。但跳槽相关研究在高教研究中一直较为稀缺,系统化、可量化的科研工作者跳槽数据长期缺失&…...
Hugging Face Hub下载模型文件:hf_hub_download vs snapshot_download保姆级对比指南
Hugging Face Hub模型下载实战指南:hf_hub_download与snapshot_download深度解析 当你第一次在Python项目中集成Hugging Face模型时,是否曾被这两个看似相似的下载函数困扰过?作为Hugging Face生态中最常用的两个下载工具,hf_hub_…...
PotPlayer跨语言字幕解决方案:基于百度翻译API的实时字幕转换工具
PotPlayer跨语言字幕解决方案:基于百度翻译API的实时字幕转换工具 【免费下载链接】PotPlayer_Subtitle_Translate_Baidu PotPlayer 字幕在线翻译插件 - 百度平台 项目地址: https://gitcode.com/gh_mirrors/po/PotPlayer_Subtitle_Translate_Baidu 在全球化…...
基于RAG的智能客服系统实战:从架构设计到生产环境优化
最近在做一个智能客服系统的升级项目,之前用规则引擎维护起来太痛苦了,纯用大模型又贵又不准。经过一番折腾,最终用RAG(检索增强生成)技术搞定了,效果提升非常明显。今天就来分享一下从架构设计到上线优化的…...
PROFINET通信避坑指南:PN/PN耦合器在S7系列PLC中的3种典型应用场景解析
PROFINET通信避坑指南:PN/PN耦合器在S7系列PLC中的3种典型应用场景解析 在工业自动化领域,PROFINET通信的稳定性和可靠性直接关系到生产线的运行效率。PN/PN耦合器作为跨子网通信的关键设备,其配置方式的选择往往让工程师陷入纠结。本文将深入…...
从g2o优化框架看TEB算法:手撕局部路径规划的图优化实现
从g2o优化框架看TEB算法:手撕局部路径规划的图优化实现 在机器人导航领域,局部路径规划算法的性能直接决定了机器人在动态环境中的反应速度和避障能力。TEB(Timed Elastic Band)算法作为ROS生态中广泛采用的解决方案,其…...
Qwen3.5-4B-Claude-Opus-GGUF效果展示:TCP三次握手状态机推理
Qwen3.5-4B-Claude-Opus-GGUF效果展示:TCP三次握手状态机推理 1. 模型能力概览 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个专注于逻辑推理和结构化分析的轻量级AI模型。这个基于Qwen3.5-4B的蒸馏版本特别擅长处理需要分步骤解释的技术问题&#…...
2025年06月CCF-GESP编程能力等级认证Scratch图形化编程一级真题解析
本文收录于《Scratch等级认证CCF-GESP图形化真题解析》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 一、单选题(每题 3 分,共 30 分) 第 1 题 2025 年 4 月 19 日在北京举行了一场颇为瞩目的人形机器人半程马拉松赛。比赛期间,跑动着的机器人会利用身上安装…...
