使用jquery或javascript在按鈕上單擊計時器持續5秒鍾

Question

我正在使用這個creativetim主題鏈接

有一個向導，它具有三個選項卡，用戶在填寫字段時單擊下一步按鈕，然后轉到下一個選項卡。

這是Wizard.html的代碼

<div class="wizard-container">
        <div class="card card-wizard" data-color="primary" id="wizardProfile">
          <form action="" method="">
            <!--        You can switch " data-color="primary" "  with one of the next bright colors: "green", "orange", "red", "blue"       -->
            <div class="card-header text-center" data-background-color="orange">
              <h3 class="card-title">
                Build Your Profile
              </h3>
              <h3 class="description">This information will let us know more about you.</h5>
                <div class="wizard-navigation">
                  <ul>
                    <li class="nav-item">
                      <a class="nav-link active" href="#about" data-toggle="tab">
                        <i class="now-ui-icons users_circle-08"></i> About
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#account" data-toggle="tab">
                        <i class="now-ui-icons ui-1_settings-gear-63"></i> Account
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#address" data-toggle="tab">
                        <i class="now-ui-icons ui-1_email-85"></i> Address
                      </a>
                    </li>
                  </ul>
                </div>
            </div>
            <div class="card-body">
              <div class="tab-content">
                <div class="tab-pane fade show active" id="about">
                  <h5 class="info-text"> Let's start with the basic information (with validation)</h5>
                  <div class="row justify-content-center">
                    <div class="col-sm-4">
                      <div class="picture-container">
                        <div class="picture">
                          <img src="../../assets/img/default-avatar.png" class="picture-src" id="wizardPicturePreview" title="" />
                          <input type="file" id="wizard-picture">
                        </div>
                        <h6 class="description">Choose Picture</h6>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="input-group form-control-lg">
                        <span class="input-group-addon">
                          <i class="now-ui-icons users_circle-08"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="First Name (required)" name="firstname">
                      </div>
                      <div class="input-group form-control-lg">
                        <span class="input-group-addon">
                          <i class="now-ui-icons text_caps-small"></i>
                        </span>
                        <input type="text" placeholder="Last Name (required)" class="form-control" name="lastname" />
                      </div>
                    </div>
                    <div class="col-lg-10 mt-3">
                      <div class="input-group form-control-lg">
                        <span class="input-group-addon">
                          <i class="now-ui-icons text_caps-small"></i>
                        </span>
                        <input type="email" placeholder="Email (required)" class="form-control" name="email" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="account">
                  <h5 class="info-text"> What are you doing? (checkboxes) </h5>
                  <div class="row justify-content-center">
                    <div class="col-lg-10">
                      <div class="row">
                        <div class="col-sm-4">
                          <div class="choice" data-toggle="wizard-checkbox">
                            <input type="checkbox" name="jobb" value="Design">
                            <div class="icon">
                              <i class="now-ui-icons design-2_ruler-pencil"></i>
                            </div>
                            <h6>Design</h6>
                          </div>
                        </div>
                        <div class="col-sm-4">
                          <div class="choice" data-toggle="wizard-checkbox">
                            <input type="checkbox" name="jobb" value="Code">
                            <div class="icon">
                              <i class="now-ui-icons business_bulb-63"></i>
                            </div>
                            <h6>Code</h6>
                          </div>
                        </div>
                        <div class="col-sm-4">
                          <div class="choice" data-toggle="wizard-checkbox">
                            <input type="checkbox" name="jobb" value="Develop">
                            <div class="icon">
                              <i class="now-ui-icons tech_tv"></i>
                            </div>
                            <h6>Develop</h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="address">
                  <div class="row justify-content-center">
                    <div class="col-sm-12">
                      <h5 class="info-text"> Are you living in a nice area? </h5>
                    </div>
                    <div class="col-sm-7">
                      <div class="form-group">
                        <label>Street Name</label>
                        <input type="text" class="form-control">
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <label>Street No.</label>
                        <input type="text" class="form-control">
                      </div>
                    </div>
                    <div class="col-sm-5">
                      <div class="form-group">
                        <label>City</label>
                        <input type="text" class="form-control">
                      </div>
                    </div>
                    <div class="col-sm-5">
                      <div class="form-group">
                        <label>Country</label>
                        <select class="selectpicker" data-size="7" data-style="btn btn-primary btn-round" title="Single Select">
                          <option value="Afghanistan"> Afghanistan </option>
                          <option value="Albania"> Albania </option>
                          <option value="Algeria"> Algeria </option>
                          <option value="American Samoa"> American Samoa </option>
                          <option value="Andorra"> Andorra </option>
                          <option value="Angola"> Angola </option>
                          <option value="Anguilla"> Anguilla </option>
                          <option value="Antarctica"> Antarctica </option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <div class="pull-right">
                <input type='button' class='btn btn-next btn-fill btn-rose btn-wd btn_wait' name='next' value='Next' />
                <input type='button' class='btn btn-finish btn-fill btn-rose btn-wd' name='finish' value='Finish' />
              </div>
              <div class="pull-left">
                <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
              </div>
              <div class="clearfix"></div>
            </div>
          </form>
        </div>
      </div>

我正在這樣做，當我單擊下一個按鈕時禁用了幾秒鍾，但是在這里它不起作用是按鈕單擊時的計時器代碼。

$(function() {
$(".btn_wait").click(function() {
    $(".btn_wait").prop("disabled", true );
    setTimeout(function() {
        $(".btn_wait").prop("disabled", false);      
    }, 3000);
});
});

我希望當我單擊“下一步”按鈕時，它消失了幾秒鍾，然后移至帶有課程的下一個選項卡。

Answer 1

去掉

$(function() {});

直接使用者

$(".btn_wait").click(function() {
    $(".btn_wait").prop("disabled", true );
    setTimeout(function() {
        $(".btn_wait").prop("disabled", false);
    }, 3000);
});