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);
    });