AloneJsSendButton()——带定时锁定功能的按钮

在做项目时，经常会遇到向手机发送验证码的情形，为了防止某些发神经的用户狂点发送按钮，通常我们在前端就会控制按钮的可用与否，所以在AloneJs系列组件里面就集成了带定时锁定功能的按钮。

一、引用

<link href="https://cdn.suziyun.com/alonejs.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.suziyun.com/alonejs.min.js"></script>

二、展示效果

1、默认状态

图 1

2、输入手机号，点击“获取验证码”按钮

图 2

当点击“获取验证码”按钮之后，按钮之上会出现一个遮罩层把按钮遮住，这样用户无论怎么点击按钮，按钮的点击事件均不会被触发，并动态地显示了距离下次发送验证码的时间。

3、异步请求返回结果

图 3

可以看到，异步请求的结果出现了错误，为什么呢？因为我这里请求的 url 地址是不存在的，所以产生了 404 错误，进而执行了 error 方法体里面的代码。但这不影响我们检验，打开开发人员工具，我们可以清晰的看到请求头：

图 4

通过请求头，我们可以得知异步请求已经正常发送到服务器，参数也是正确的。

三、调用示例

Html：

<table>
    <tbody>
        <tr>
            <td><input id="txtMobile" type="text" /></td>
            <td>
                <button id="btnGetVCode">获取验证码</button>
            </td>
        </tr>
    </tbody>
</table>

Javascript：

1、使用wait()方法发送。

$(function () {
    AloneJsSendButton("#btnGetVCode").init({
        waittime: 10,  // 指定等待时间，单位：秒
        url: '/api/vcode/send',
        data: function () {
            return {
                mobile: $("#txtMobile").val()
            };
        }, //注意这里，data参数是个函数，函数里面返回的是一个对象，而并非我们常见的直接返回对象。
        success: function (data) {
            iBox.msgbox("测试：" + data);
        },
        error: function () {
            iBox.msgbox("服务器繁忙，请稍后再试！");
        }
    }).wait();
});

2、使用send()方法发送。

$(function () {
    var btn = AloneJsSendButton("#btnGetVCode").init({
        waittime: 10,  // 指定等待时间，单位：秒
        url: '/api/vcode/send',
        data: function () {
            return {
                mobile: $("#txtMobile").val()
            };
        }, //注意这里，data参数是个函数，函数里面返回的是一个对象，而并非我们常见的直接返回对象。
        success: function (data) {
            iBox.msgbox("测试：" + data);
        },
        error: function () {
            iBox.msgbox("服务器繁忙，请稍后再试！");
        }
    });
    $("#btnGetVCode").on("click", function () {
        btn.send();  //执行发送
    });
});

可能有同学会问，wait()和send()有啥区别？其实乍一看它俩并无太大区别，它们唯一的区别就是：wait()里面给按钮注册了点击事件，用户一点击按钮就会触发发送任务；而send()仅仅就是一个执行发送任务的函数，它里面并没有给按钮注册点击事件。简单来说，wait()包含了send()。之所以send()会单独存在，是因为在某些情况下，我们可能希望不用点击“获取验证码”按钮就能直接执行发送任务。