jquery 发送验证码,倒计时按钮处理通用函数

function verifyCodeBtnHandler(e, callback = () => {}, t = 60) {
  const _this = e.currentTarget || e.target;
  // 防止多次点击
  const status = $(_this).data('status');
  if (status != 1) {
    $(_this).data('status', 1);
    const tip = $(_this).data('tip');
    const text = $(_this).text();
    // 设置禁用状态
    $(_this).attr('disabled', true);

    // t 秒倒计时
    let time = t;
    let timer = null;

    const reset = () => {
      clearInterval(timer);
      $(_this).text(text);
      $(_this).attr('disabled', false);
      $(_this).data('status', 0);
    };

    const fun = () => {
      time--;
      if (time < 0) {
        reset();
      } else {
        $(_this).text(time + ' ' + (tip ? tip : 'seconds try'));
      }
    };

    const start = () => {
      timer = setInterval(fun, 1000);
      fun();
    };

    callback({ start, reset });
  }
}

使用

verifyCodeBtnHandler(e, ({ start, reset }) => {
      //ajax发送邮件
      $.ajax({
        url: '/get',
        type: 'GET',
        dataType: 'json',
        data: {},
        //接收回传参数
        success: function (res) {
          start();
        },
        error: function (data) {
          reset();
        },
      });
    });
  });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值