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

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

/**
 * @author 飞云
 * @wechat imfeiyun
 * @link  http://www.feiyunjs.com
 */
// 给一个延时，让用户看到是在请求登录
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开发脚本界面

AiWork简介

AIWork是一款安卓和IOS手机的自动化测试开发引擎，采用免root技术，自研IDE代码编辑器，自研图色引擎2.0，自研agent adb代理模式，自研hid硬件自动化，脚本代码采用javascript脚本代码（rhino引擎），提供了众多的工具，方便自动生成js代码。

AiWork开发文档

在官方文档的基础上，进行重新排版和优化。
一个优雅的文档，对于开发体验的提升，是效果显著的。
永久域名：aiwork.wiki