当前位置: 首页 > news >正文

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&#xff1a; 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实现大麦网抢票

丹摩&#xff5c;丹摩助力selenium实现大麦网抢票 声明&#xff1a;非广告&#xff0c;为用户体验 1.引言 在人工智能飞速发展的今天&#xff0c;丹摩智算平台&#xff08;DAMODEL&#xff09;以其卓越的AI算力服务脱颖而出&#xff0c;为开发者提供了一个简化AI开发流程的强…...

基于Qt/C++/Opencv实现的一个视频中二维码解析软件

本文详细讲解了如何利用 Qt 和 OpenCV 实现一个可从视频和图片中检测二维码的软件。代码实现了视频解码、多线程处理和界面更新等功能&#xff0c;是一个典型的跨线程图像处理项目。以下分模块对代码进行解析。 一、项目的整体结构 项目分为以下几部分&#xff1a; 主窗口 (M…...

智慧理财项目测试文档

目录 幕布思维导图链接&#xff1a;https://www.mubu.com/doc/6xk3c7DzgFs学习链接&#xff1a;https://www.bilibili.com/video/BV15J4m147vZ/?spm_id_from333.999.0.0&vd_source078d5d025b9cb472d70d8fda1a7dc5a6智慧理财项目测试文档项目介绍项目基本信息项目业务特性系…...

R | 统一栅格数据的坐标系、分辨率和行列号

各位同学&#xff0c;在做相关性等分析时&#xff0c;经常会遇到各栅格数据间的行列号不统一等问题&#xff0c;下面的代码能直接解决这类麻烦。以某个栅格数据的坐标系、分辨率和行列号为准&#xff0c;统一文件夹内所有栅格并输出到新的文件夹。 代码只需要更改输入输出和ti…...

C++学习——编译的过程

编译的过程——预处理 引言预处理包含头文件宏定义指令条件编译 编译、链接 引言 C程序编译的过程&#xff1a;预处理 -> 编译&#xff08;优化、汇编&#xff09;-> 链接 编译和链接的内容可以查阅这篇文章&#xff08;点击查看&#xff09; 预处理 编译预处理是指&a…...

当你要改文件 但是原来的文件内容又不能丢失的时候,拷贝一份(备注原来的),然后添加后缀:.bak

当你要改文件 但是原来的文件内容又不能丢失的时候&#xff0c;拷贝一份&#xff08;备注原来的&#xff09;&#xff0c;然后添加后缀&#xff1a;.bak &#xff01;&#xff01;&#xff01;文件不要直接删除&#xff0c;若你以后要还原的话会找不到...

MATLAB神经网络(五)——R-CNN视觉检测

5.1 目标分类、检测与分割 在计算机视觉领域&#xff0c;目标分类、检测与分割是常用计数。三者的联系与区分又在哪呢&#xff1f;目标分类是解决图像中的物体是什么的问题&#xff1b;目标检测是解决图像中的物体是什么&#xff0c;在哪里的问题&#xff1b;目标分割时将目标和…...

mock.js:定义、应用场景、安装、配置、使用

前言&#xff1a;什么是mock.js&#xff1f; 作为一个前端程序员&#xff0c;没有mockjs你不感觉很被动吗&#xff1f;你不感觉你的命脉被后端那个男人掌握了吗&#xff1f;所以&#xff0c;我命由我不由天&#xff01;学学mock.js吧&#xff01; mock.js 是一个用于生成随机…...

【GAT】 代码详解 (1) 运行方法【pytorch】可运行版本

GRAPH ATTENTION NETWORKS 代码详解 前言0.引言1. 环境配置2. 代码的运行2.1 报错处理2.2 运行结果展示 3.总结 前言 在前文中&#xff0c;我们已经深入探讨了图卷积神经网络和图注意力网络的理论基础。还没看的同学点这里补习下。接下来&#xff0c;将开启一个新的阶段&#…...

Transformer中的Self-Attention机制如何自然地适应于目标检测任务

Transformer中的Self-Attention机制如何自然地适应于目标检测任务&#xff1a; 特征图的降维与重塑 首先&#xff0c;Backbone&#xff08;如ResNet、VGG等&#xff09;会输出一个特征图&#xff0c;这个特征图通常具有较高的通道数、高度和宽度&#xff08;例如CHW&#xff…...

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款知识共享软件

远程办公模式下&#xff0c;知识共享软件成为了团队协作和沟通的重要工具。以下是8款备受推崇的知识共享软件&#xff1a; 1、HelpLook AI知识库 简介&#xff1a;HelpLook是一款快速搭建AI知识库的系统&#xff0c;具备强大功能&#xff0c;如快速精准的知识检索、灵活定制的…...

3.9MayBeSomeAssembly

就是先从数组里&#xff0c;乘4得到正确地址 32&#xff08;&s3),s3是基址&#xff0c;32是偏移量&#xff0c;就是先从数组里取出数到临时寄存器&#xff0c;然后再在临时寄存器上加上变量&#xff0c;最后再把临时寄存器上的变量存到数组里&#xff0c;偏移量&#xff0…...

i春秋-签到题

练习平台地址 竞赛中心 题目描述 题目内容 点击GUESS后会有辨识细菌的选择题 全部完成后会有弹窗提示 输入nickname后提示获得flag F12检查 元素中没有发现信息 检查后发现flag在控制台中 flag flag{663a5c95-3050-4c3a-bb6e-bc4f2fb6c32e} 注意事项 flag不一定要在元素中找&a…...

TypeScript 中扩展现有模块的用法

declare module 是 TypeScript 中用于扩展现有模块的特性。它允许开发者在已有模块的基础上&#xff0c;添加新的功能&#xff08;比如扩展接口、添加类型声明等&#xff09;。通过 declare module&#xff0c;可以将额外的声明合并到原模块中。以下是用法详解&#xff1a; 用…...

【报错记录】解决Termux中pulseaudio启动报错,报:E: [pulseaudio] main.c: Daemon startup failed.

前言 在尝试使用Termux-X11启动Minecraft过程中&#xff0c;不知道怎么回事原本好好的pulseaudio居然无法启动了&#xff0c;一直在报&#xff1a; E: [pulseaudio] main.c: Daemon startup failed. 重装了好几次也没用解决方案如下。 排除重复启动 如果pulseaudio之前已经…...

终极指南:用EdgeRemover快速彻底卸载微软Edge浏览器

终极指南&#xff1a;用EdgeRemover快速彻底卸载微软Edge浏览器 【免费下载链接】EdgeRemover PowerShell script to remove Microsoft Edge in a non-forceful manner. 项目地址: https://gitcode.com/gh_mirrors/ed/EdgeRemover 还在为Windows系统中无法彻底移除Micro…...

免费内容解锁工具:提升信息获取效率的技术解决方案

免费内容解锁工具&#xff1a;提升信息获取效率的技术解决方案 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;专业内容与普通用户之间往往隔着一道…...

FastJson内存泄漏实战:我是如何用MAT工具定位到IdentityHashMap这个坑的

FastJson内存泄漏深度剖析&#xff1a;从MAT工具实战到IdentityHashMap陷阱破解 凌晨三点&#xff0c;手机突然响起刺耳的告警声——生产环境某核心服务的堆内存使用率突破95%。作为值班工程师&#xff0c;我瞬间清醒过来。这不是普通的OOM&#xff0c;而是一场持续增长的内存…...

软考-信息系统项目管理师-项目风险管理-知识点及考点预测

本章考情分析&#xff1a;项目风险管理是十大知识领域中“理论工具计算”结合最紧密的章节之一。历年综合知识选择题约占3-5分&#xff0c;案例分析几乎必考1道题&#xff08;10-20分&#xff09;&#xff0c;论文也是高频方向。“风险是未来的不确定性&#xff0c;问题已经是过…...

HunyuanVideo-Foley音效生成:支持SMPTE时间码对齐视频关键帧

HunyuanVideo-Foley音效生成&#xff1a;支持SMPTE时间码对齐视频关键帧 1. 产品概述 HunyuanVideo-Foley是一款专为影视后期制作设计的AI音效生成工具&#xff0c;其核心创新在于支持SMPTE时间码精确对齐视频关键帧。这意味着音效师可以基于视频时间轴上的特定帧&#xff0c…...

从零构建一个轻量级WebSocket服务器:基于libwebsockets的实战与事件循环剖析

从零构建一个轻量级WebSocket服务器&#xff1a;基于libwebsockets的实战与事件循环剖析 在当今实时应用盛行的时代&#xff0c;WebSocket技术已成为构建即时通讯、实时数据推送等功能的基石。不同于传统的HTTP请求-响应模式&#xff0c;WebSocket提供了全双工通信能力&#xf…...

Python串口助手开发避坑实录:新手用tkinter+pyserial常遇到的5个典型问题及解决

Python串口助手开发避坑指南&#xff1a;5个典型问题与实战解决方案 第一次用Python开发串口调试工具时&#xff0c;那种既兴奋又忐忑的心情我至今记得。看着自己写的界面能收发数据&#xff0c;成就感爆棚&#xff1b;但随之而来的各种奇怪问题&#xff0c;又让人抓狂。本文将…...

别再羡慕ECharts了!用PyQt+Matplotlib打造你的专属交互式图表工具(附完整代码)

用PyQtMatplotlib打造媲美ECharts的交互式数据可视化工具 在数据分析领域&#xff0c;Web端的ECharts以其丰富的交互功能广受好评&#xff0c;但当我们开发桌面应用或需要高性能处理大数据时&#xff0c;Python技术栈的开发者常常面临两难选择。Matplotlib虽然性能优异&#xf…...

Dify插件安装全攻略:从在线市场到离线部署的完整实践

1. Dify插件安装前的准备工作 在开始安装Dify插件之前&#xff0c;我们需要先了解几个关键概念。Dify 1.0.0版本之后&#xff0c;所有工具和模型供应商都改为了插件形式&#xff0c;这意味着我们需要掌握插件的安装方法才能充分发挥Dify的功能。插件主要分为五大类&#xff1a…...

为什么你的BUCK电路动态响应慢?从Fm增益公式反推电感选型技巧

为什么你的BUCK电路动态响应慢&#xff1f;从Fm增益公式反推电感选型技巧 在电源设计领域&#xff0c;BUCK电路的动态响应速度常常成为工程师调试的痛点。当负载突变时输出电压的恢复时间过长&#xff0c;或者环路补偿怎么调都不理想&#xff0c;问题很可能出在最基础的电感参…...