东莞网站系统哪里好,wordpress编辑器 下载,旅行社网站建设,如何制作自己的个人网站方法一#xff1a;变量限制
设置一个变量#xff0c;在提交表单前设置为false#xff0c;当表单开始提交时设置为true#xff08;禁用按钮#xff09;#xff0c;成功请求或者失败再设置为false
代码
wxml
form bindsubmitformSubmitview cl…方法一变量限制
设置一个变量在提交表单前设置为false当表单开始提交时设置为true禁用按钮成功请求或者失败再设置为false
代码
wxml
form bindsubmitformSubmitview classsectioninput placeholder请输入姓名 nameusername //viewview classsectioninput typepassword placeholder请输入密码 namepassword //viewbutton form-typesubmit提交/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 bindsubmitformSubmitview classsectioninput placeholder请输入姓名 nameusername //viewview classsectioninput typepassword placeholder请输入密码 namepassword //viewbutton form-typesubmit提交/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,});});
}
