AiWork和autojs使用H5做脚本界面时,处理按钮的重复点击

前言

总有沙雕用户重复点击某个按钮,导致程序出错。
怎么处理呢?
点击按钮后,首先将按钮禁用若干秒。
这样就能避免重复点击。

实现

点击登录按钮后,给按钮添加weui-btn_disabled,实现禁用

$("#btn_begin").addClass('weui-btn_loading weui-btn_disabled').prop("disabled", true).html('<i class="weui-loading"></i>').text('登录中...');   //显示loading

接下来,使用同步请求,调用登录接口。
登录接口有返回值以后,不管是成功还是失败,都需要解除登录按钮的禁用。

// 给一个延时,让用户看到是在请求登录
setTimeout(() => {
    // 判断用户资料是否合法。合法则允许执行主程序。不合法则给出提示
    let username = $("#username").val();
    let password = $("#password").val();
    if (loginSync(username, password)) {
        // 登录成功,开始请求并执行脚本任务

        // 重定义按钮样式
         $("#btn_begin").removeClass('weui-btn_loading weui-btn_primary').addClass('weui-btn_warn').text('Stop');   //隐藏loading

         // N秒后解除按钮的禁用
         setTimeout(() => {
         $("#btn_begin").removeClass('weui-btn_disabled');   //解除禁用
}, 6 * 1000);
    } else {
        // 登录失败,解除按钮禁用状态
        $("#btn_begin").removeClass('weui-btn_loading weui-btn_disabled').addClass('weui-btn_primary').prop("disabled", false).text('Start');
    }
}, 1 * 1000);

经过测试,发现即使按钮在禁用状态(拥有weui-btn_disabled类),还是可以点击。
为了保险起见,在按钮的点击事件的开头位置,加入以下判断

if ($("#btn_begin").hasClass('weui-btn_disabled')) return;  // 处理按钮禁用状态无效的问题

这样就能有效解决重复点击的问题了

关联文章

AiWork和autojs可用的同步POST和异步POST请求,使用H5做脚本界面
autox.js结合JsBridge及weui+实现web界面的交互,应用WebView与 HTML开发脚本界面

1. 官方交流QQ群,添加多个不批。建议使用安卓手机或电脑申请。
飞云脚本圈: 586333520飞云脚本圈
Auto.js学习交流③群:286635606
Auto.js学习交流②群:712194666(满员)
IOS免越狱自动化测试群:691997586
2. 盗版,破解有损他人权益和违法作为,请各位会员支持正版。
3. 本站部分资源来源于用户上传和网络搜集,如有侵权请提供版权证明并联系站长删除。
4.如未特别申明,本站的技术性文章均为原创,未经授权,禁止转载/搬运等侵权行为。
5.全站所有付费服务均为虚拟商品,购买后自动发货。售出后概不接受任何理由的退、换。注册即为接受此条款。
6.如果站内内容侵犯了您的权益,请联系站长删除。
飞云脚本 » AiWork和autojs使用H5做脚本界面时,处理按钮的重复点击

企业级大数据智能营销管理系统

了解详情