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

分手后的思念是犯贱 2021-09-30 16:00 222阅读 0赞

**倒计时**

// 倒计时
        /**
         * $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);
        });