微信小程序:限制表单多次提交(变量限制+防抖)

方法一:变量限制

设置一个变量,在提交表单前设置为false,当表单开始提交时设置为true(禁用按钮),成功请求或者失败再设置为false

代码

wxml

<form bindsubmit="formSubmit"><view class="section"><input placeholder="请输入姓名" name="username" /></view><view class="section"><input type="password" placeholder="请输入密码" name="password" /></view><button form-type="submit">提交</button>
</form>

js

const app = getApp()
Page({data: {isSubmitting: false, // 新增一个表示是否正在提交的状态},formSubmit: function(e) {if (this.data.isSubmitting) return; // 如果正在提交,则不再处理新的提交请求// 设置为正在提交状态this.setData({ isSubmitting: true }); const forminfo = e.detail.value;console.log(forminfo.username+"|"+forminfo.password)//发送请求wx.request({url: app.globalData.position + 'Produce/test',data: {username: forminfo.username,password:forminfo.password},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {console.log(res.data)this.setData({ isSubmitting: false }); // 请求成功后重置提交状态wx.reLaunch({url: '/pages/mine/index/index',})},fail(res) {console.log("查询失败")this.setData({ isSubmitting: false }); // 请求失败后也要重置提交状态}})}
})

方法二:防抖功能

节流(Throttling)和防抖(Debouncing)是两种不同的事件处理优化技术,主要用于限制函数被频繁调用,常用于处理那些高频触发但不需要连续响应的事件,比如窗口 resize、scroll 事件,以及表单提交等场景。
防抖 (Debouncing):
        防抖是指在一个事件持续触发的过程中,只有当这个事件停止触发一段时间后再执行回调函数的操作。举个例子,在监听窗口 resize 事件时,我们不希望在用户连续调整窗口大小的过程中不断触发重绘计算,而是等到用户停止调整尺寸(即一定时间间隔内无新触发)后再执行一次计算。这样可以有效地合并多次操作,减少不必要的计算。
        实现原理: 想象一下按住开关灯会一直闪烁的情景,防抖就像是松开开关后才允许灯亮起,只要手还在按着,不管按了多少次,灯都不会再次亮起,除非松开手并等待一定时间后再次按下。
节流 (Throttling):
        节流则是指在一定时间内无论事件如何触发,都会按照一定的频率执行回调函数,保证了在一段时间内只会被执行一次。这意味着,即使事件连续触发,也会有一定的最小时间间隔来执行回调函数。
        实现原理: 同样以开关灯为例,节流就像是定时开关,即使你快速反复地按开关,灯也只会按照固定的频率(比如每秒钟开关一次)进行切换。
这两种策略在实际应用中可以根据需求选择合适的解决方案。在处理表单提交时,通常采用防抖策略来确保用户在提交按钮被点击后的一段时间内不会重复提交表单;而在滚动事件等场景下,可能更倾向于采用节流策略,确保在用户滚动过程中定期执行某项操作,而不是在滚动停止后再执行。

代码

wxml

<form bindsubmit="formSubmit"><view class="section"><input placeholder="请输入姓名" name="username" /></view><view class="section"><input type="password" placeholder="请输入密码" name="password" /></view><button form-type="submit">提交</button>
</form>

 js

const app = getApp()
Page({data: {isSubmitting: false,submitTimeoutId: null,},// 自定义防抖函数debounceFn(func, delay) {let timer = null;return function(...args) {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {func.apply(this, args);timer = null;}, delay);};},onLoad: function() {// 页面加载完成后初始化防抖处理的表单提交方法this.formSubmitWrapper = this.debounceFn(this.actualFormSubmit, 1000);},actualFormSubmit: async function(e) {if (this.data.isSubmitting) return;this.setData({isSubmitting: true,});const forminfo = e.detail.value;console.log(forminfo.username + "|" + forminfo.password);try {const response = await promisifyRequest({url: app.globalData.position + 'Produce/test',data: {username: forminfo.username,password: forminfo.password,},header: {"Content-Type": "application/x-www-form-urlencoded",},method: 'POST',dataType: 'json',});console.log(response.data);this.setData({ isSubmitting: false });wx.reLaunch({url: '/pages/mine/index/index',});} catch (error) {console.error("查询失败", error);this.setData({ isSubmitting: false });}},formSubmit: function(e) {this.formSubmitWrapper(e);},
});// 将wx.request转换为Promise的形式,用于配合async/await语法
function promisifyRequest(options) {return new Promise((resolve, reject) => {wx.request({...options,success: resolve,fail: reject,});});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/820578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 3113. Find the Number of Subarrays Where Boundary Elements Are Maximum

Leetcode 3113. Find the Number of Subarrays Where Boundary Elements Are Maximum 1. 解题思路2. 代码实现 题目链接&#xff1a;3113. Find the Number of Subarrays Where Boundary Elements Are Maximum 1. 解题思路 这一题多少有些惭愧&#xff0c;也是一开始没想到&…

FebHost:为什么注册.BE比利时域名?

.be 是比利时的国家代码顶级域名&#xff08;ccTLD&#xff09;&#xff0c;通常用于与该国有关的网网站。这个域名为那些希望在线上建立与比利时有关联系的个人、公司和组织提供了一个重要的网络标识。 .be 域名于1988年创建&#xff0c;由.BE域名注册机构管理&#xff0c;这…

【k8s】:深入理解 Kubernetes 中的污点(Taints)与容忍度(Tolerations)

【k8s】&#xff1a;深入理解 Kubernetes 中的污点&#xff08;Taints&#xff09;与容忍度&#xff08;Tolerations&#xff09; 1、污点&#xff08;Taints&#xff09;2、容忍度&#xff08;Tolerations&#xff09;3、示例演示-测试污点的具体应用场景3.1 给节点打污点&…

HarmonyOS开发案例:【智能煤气检测】

样例简介 智能煤气检测系统通过实时监测环境中烟雾浓度&#xff0c;当一氧化碳浓度超标时&#xff0c;及时向用户发出警报。在连接网络后&#xff0c;配合数字管家应用&#xff0c;用户可以远程配置智能煤气检测系统的报警阈值&#xff0c;远程接收智能煤气检测系统报警信息。…

【QT教程】QT6信号与槽

QT6信号与槽 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费QT视…

思路弱密码比较

weakpass之类的网址下载密码本存入数据库&#xff0c;比如叫做password字段&#xff0c;每次比较SELECT * FROM users WHERE LOCATE(example, password) > 0;

多轴机械臂/正逆解/轨迹规划/机器人运动学/Matlab/DH法 学习记录02——机械臂几何法与DH表示法

系列文章目录 本科毕设正在做多轴机械臂相关的内容&#xff0c;这里是一个学习机械臂运动学课程的相关记录。 如有任何问题&#xff0c;可发邮件至layraliufoxmail.com问询。 1. 数学基础 2. 机械臂几何法与DH表示法 文章目录 系列文章目录一、手臂几何法1.机械手臂2.机械手臂…

vue3+vite+superMap(超图)实现淹没分析

<template><div><el-dialog draggable destroy-on-close v-if="changeInundAtionState" :modal="false" v-model="changeInundAtionState"close-icon="" title="淹没分析" width="20%" :before-cl…

4.配置USART串口实现printf打印

通过TTL转USB实现电脑和单片机连通,是我们调试必不可少的工具 查看原理图,使用USART1,它们的TX和RX分别在PA9和PA10 新建Usart.c存放串口模块的初始化 这段代码是复制了正点原子的工程,添加到前面 #if SYSTEM_SUPPORT_OS #include "includes.h" //ucos 使用 …

Docker安装Kong网关

文章目录 一、kong是什么?二、搭建步骤1.搭建PostgreSQL2.搭建Kong网关2.1、制作镜像2.2、数据库初始化2.3、启动Kong网关一、kong是什么? Github地址:https://github.com/Kong/kong Kong是一个可扩展、开源的云原生API网关,可以在分布式环境中管理、监控和安全地发布API…

每日两题 / 15. 三数之和 73. 矩阵置零(LeetCode热题100)

15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 先确定一个数t&#xff0c;对于剩下的两个数&#xff0c;要求两数之和为t的负数 三数之和就退化成了两数之和&#xff0c;两数之和可以用双指针 先排序&#xff0c;左右两个指针&#xff0c;指向的数之和大于目标值&…

AI启示录:既是企业安全利器,也是内部隐藏炸弹

目录 发现潜在威胁->成为内部威胁 精准检测威胁->扰乱正常业务 深度学习->数据中毒 随着网络威胁的迅速发展&#xff0c;专家预计&#xff0c;到 2024 年网络犯罪将给美国公司带来高达 4520 亿美元的损失&#xff0c;且这一数字在未来几年还会迅速增长。除了网络安全措…

鱼哥推荐书籍第18期:《推荐系统》算法 案例与大模型

鱼哥推荐书籍第18期&#xff1a;《推荐系统》算法 案例与大模型 什么是推荐系统&#xff1f;推荐系统解决了哪些问题&#xff1f;推荐系统的应用领域常用的推荐算法&#xff1a;基于内容的推荐算法协同过滤算法&#xff1a; 如何系统学习推荐系统&#xff1a;第一部分&#xff…

IO流-IO框架

简介 java的IO流操作提供了最简单的操作&#xff0c;第三方基于日常使用习惯&#xff0c;写了很多IO框架&#xff0c;更加方便操作避免重复造轮子&#xff0c;提高开发效率 Commons-io 简介 Commons-io是apche提供的IO操作的小框架 部分常用的API 引入依赖 <dependency>…

天工杂志社《天工》杂志社2024年第5期目录

业界翘楚 巍巍者昆仑 煌煌者华夏 乔彦鹏; 6-8 工美史话 日月之光照澈幽冥——墓葬铜镜中柿蒂纹意象辨析 周昕怡;刘春芽; 9-11 西藏传统手工艺技能教育发展历程研究 吕元菊; 12-14 探索研究《天工》投稿&#xff1a;cn7kantougao163.com 传统装饰艺术设计美学的…

HashMap的扩容看这一篇足够

在Java中&#xff0c;对于HashMap这样的实现&#xff0c;put方法是用来将一个键值对插入到Map中的核心方法。以下是HashMap类中put方法的大致执行流程&#xff1a; 计算Hash值&#xff1a; 首先&#xff0c;put方法会接收一个键&#xff08;Key&#xff09;和一个值&#xff0…

局域网管理软件哪个好?局域网电脑管理系统实践案例

之前有一个公司案例&#xff0c;是这样的&#xff1a; 公司名称&#xff1a;智慧科技有限公司 背景&#xff1a; 智慧科技有限公司是一家拥有数百名员工的中型企业&#xff0c;随着业务的快速发展&#xff0c;公司面临着网络管理上的挑战。 员工在日常工作中需要频繁地访问…

探索性测试

探索性测试 探索性测试是一种动态、灵活的软件测试方法&#xff0c;与传统的计划驱动测试相对。在探索性测试中&#xff0c;测试人员不是依靠事先制定的详尽测试计划&#xff0c;而是根据其经验和直觉&#xff0c;通过探索软件应用的功能、界面、性能等方面来发现缺陷和问题。…

微信小程序使用iconfont

进入iconfont&#xff0c;添加至项目 进入项目&#xff0c;点击生成代码&#xff0c;或更新代码 点击打开样式 复制内容到小程序的style文件夹下 最后引入到app.wxss

植物中鉴定直系同源基因

直系同源基因&#xff08;Orthologous genes&#xff09;是指在不同物种中由共同祖先遗传的基因&#xff0c;它们在进化过程中保持了相似的功能和序列。鉴定植物中的直系同源基因通常涉及以下步骤&#xff1a; &#xff08;一&#xff09; 1. **序列获取**&#xff1a; 从…