jquery 倒计时 禁用元素 解开禁用 防止连续点击

倒计时

    // 倒计时
    /**
     * $el jquery对象
    */
    function countDown($el) {
      var num = 60
      var timer = null
      var defaultCss = { cursor: 'pointer', 'opacity': 1 } // 默认样式
      var disableCss = { cursor: 'not-allowed', 'opacity': 0.5 } // 禁用样式
      if ($el[0].tagName !== 'BUTTON') { // 不是button 通过禁用鼠标事件禁用
        defaultCss['pointer-events'] = 'all'
        disableCss['pointer-events'] = 'none'
      }
      timer = setInterval(function () {
        if (num > 0) {
          $el.text(num + 's')
          $el.attr('disabled', true)
          $el.css(disableCss)
          num--
        } else {
          $el.text('发送验证码')
          $el.attr('disabled', false)
          $el.css(defaultCss)
          clearInterval(timer)
        }
      }, 1000)
    }

用法

    // 获取验证码
    $('.getcode').on('click', function () {
      countDown($(this))
    })

禁用元素 解开禁用 防止连续点击

    /**
     * $el jquery对象
     * disable (true，false)
     */
    function setDisadle($el, disable) {
      var defaultCss = { cursor: "pointer", opacity: 1 }; // 默认样式
      var disableCss = { cursor: "not-allowed", opacity: 0.5 }; // 禁用样式
      if ($el[0].tagName !== "BUTTON") {
        defaultCss["pointer-events"] = "all";
        disableCss["pointer-events"] = "none";
      }
      if (disable) {
        $el.attr("disabled", true);
        $el.css(disableCss);
      } else {
        $el.attr("disabled", false);
        $el.css(defaultCss);
      }
    }

用法

    $(".box").on("click", function() {
      console.log(123);
      setDisadle($(this), true); // 开始禁用
      setTimeout(function() {
        // 异步交互处理完，解开禁用
        setDisadle($(".box"), false);
      }, 3000);
    });