小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如何保证按钮不被高频点击?
是这样,我有个答题小程序,在交卷的时候,有时候用户快速点击两次会产生两条有效答题记录,我想控制下,保证交卷只能提交一次
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
前端。。节流和防抖了解下。后端3s内发送多个请求都提示操作过快,并且不录入库里。
更简单的操作:
this.start = true // 默认可点击 App({ handleSubmit() { if (this.start) { // 默认可点击 this.start = false // 按钮点击后,发送请求前,设置该变量为false,在请求结果未返回前,用户不可再次点击,因为true才可点击。 this.request('xxx', xxx).then((res) => { // 接口提交成功后,设置该变量为true,用户可再次点击。 this.start = true }) } } })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
点击按钮之后用showloading,mask设为true,接口返回结束调用wx.hideLoading
debounce或者disable
做一个真的按钮 一个假的按钮不就行了
按钮被点击后先置为不可用(防止后续连点),等第一个点击处理完毕(成功或失败)再恢复按钮可用状态,这样操作可否?
想知道怎么防止用户快速多次点击
/*函数节流*/
function throttle(fn, interval) {
var enterTime = 0;//触发的时间
var gapTime = interval || 300 ;//间隔时间,如果interval不传,则默认300ms
return function() {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context,arguments);
enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
/*函数防抖*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
clearTimeout(timer);
var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function() {
fn.call(context,args);
}, gapTime);
export default {
throttle,
debounce
//在index.wxss中调用方式
import tool from "../../相对路径/tool";
yourFunction: tool.throttle(function (e) {
//dosomething
}, 500),
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
前端。。节流和防抖了解下。后端3s内发送多个请求都提示操作过快,并且不录入库里。
更简单的操作:
this.start = true // 默认可点击 App({ handleSubmit() { if (this.start) { // 默认可点击 this.start = false // 按钮点击后,发送请求前,设置该变量为false,在请求结果未返回前,用户不可再次点击,因为true才可点击。 this.request('xxx', xxx).then((res) => { // 接口提交成功后,设置该变量为true,用户可再次点击。 this.start = true }) } } })
点击按钮之后用showloading,mask设为true,接口返回结束调用wx.hideLoading
debounce或者disable
做一个真的按钮 一个假的按钮不就行了
按钮被点击后先置为不可用(防止后续连点),等第一个点击处理完毕(成功或失败)再恢复按钮可用状态,这样操作可否?
想知道怎么防止用户快速多次点击
/*函数节流*/
function throttle(fn, interval) {
var enterTime = 0;//触发的时间
var gapTime = interval || 300 ;//间隔时间,如果interval不传,则默认300ms
return function() {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context,arguments);
enterTime = backTime;//赋值给第一次触发的时间,这样就保存了第二次触发的时间
}
};
}
/*函数防抖*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
return function() {
clearTimeout(timer);
var context = this;
var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
timer = setTimeout(function() {
fn.call(context,args);
}, gapTime);
};
}
export default {
throttle,
debounce
};
//在index.wxss中调用方式
import tool from "../../相对路径/tool";
yourFunction: tool.throttle(function (e) {
//dosomething
}, 500),