单击后单击JS阻止按钮，运行代码后取消阻止

Question

我无法解决这个问题，我的小提琴：

<https://jsfiddle.net/AlexRoPe/z61unf7m/5/>

每次单击按钮都会获得状态类型“焦点”，如果单击不止一次，它将多次执行searchMatchTablee函数。

我希望它只运行一次，完成后可以再次运行。

从Fiddle中可以看出，我使用了变量来进行阻塞，并使用了阻塞，禁用和支持的方法。

window.running = false
window.teste = function() {
  $('body').on('click', '#buttonSearch', function(e) {
    $('button#buttonSearch').prop('disabled', true)
    searchMatchTablee()
    $('button#buttonSearch').prop('disabled', false)

  })
}

function searchMatchTablee(callback) {
  if (running) {
    return
  }
  running = true
  console.log('1')
  $('.table.table-bordered.table-striped tr').show()
  let wordSearch = $('#form\\:globalFilter').val()
  document.querySelectorAll('.table.table-bordered.table-striped tr td:nth-child(1)').forEach((b) => {
    $('button#buttonSearch').prop('disabled', true)
    console.log('running')
    if (!(b.innerText.includes(wordSearch))) {
      $(b).parent().hide()
    }
  })
  console.log('3')
  running = false
}
teste()

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="panel panel-default">
  <div class="panel-body"><span id="form:tabelaEspecs">
  <div class="row">
   <div class="col-sm-4 col-md-4 col-lg-4 form-group">
    <div class="wm-flex wm-left wm-custom-button" style="width: 100%"><input id="form:globalFilter" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all wm-borderless-r"> 
      <button id="buttonSearch" type="button" style="white-space: nowrap; font-size: 12px;" class="btn btn-success wm-borderless-l wm-button-h">Search</button>
    </div>
   </div>
  </div>
  <table class="table  table-bordered table-striped ">
    <thead>
     <tr>
      <th style="width: 30%">Numbers</th>
     </tr>
    </thead>
   <tbody>
    <tr style=""><td>0</td></tr>
    <tr style=""><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr style=""><td>3</td></tr>
    <tr style=""><td>4</td></tr>
    <tr style=""><td>5</td></tr>
    <tr style=""><td>6</td></tr>
    <tr style=""><td>7</td></tr>
    <tr style=""><td>8</td></tr>
    <tr style=""><td>9</td></tr>
    <tr style=""><td>10</td></tr>
    <tr style=""><td>11</td></tr></tbody>
  </table></span>
  </div>
</div>

Answer 1

这是我的建议

$(function() {
  $('#buttonSearch').on('click', function(e) {
    e.preventDefault();
    $(this).prop('disabled', true)
    $('.table.table-bordered.table-striped tr').show()
    let wordSearch = $('#form\\:globalFilter').val()
    $('.table.table-bordered.table-striped tr').each(function() {
      var val = $(this).find("td:nth-child(1)").text();
      if (!(val.includes(wordSearch))) {
        $(this).hide()
      }
    })
    $(this).prop('disabled', false)
  });
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="panel panel-default">
  <div class="panel-body"><span id="form:tabelaEspecs">
  <div class="row">
   <div class="col-sm-4 col-md-4 col-lg-4 form-group">
    <div class="wm-flex wm-left wm-custom-button" style="width: 100%"><input id="form:globalFilter" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all wm-borderless-r"> 
      <button id="buttonSearch" type="button" style="white-space: nowrap; font-size: 12px;" class="btn btn-success wm-borderless-l wm-button-h">Search</button>
    </div>
   </div>
  </div>
  <table class="table  table-bordered table-striped ">
    <thead>
     <tr>
      <th style="width: 30%">Numbers</th>
     </tr>
    </thead>
   <tbody>
    <tr style=""><td>0</td></tr>
    <tr style=""><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr style=""><td>3</td></tr>
    <tr style=""><td>4</td></tr>
    <tr style=""><td>5</td></tr>
    <tr style=""><td>6</td></tr>
    <tr style=""><td>7</td></tr>
    <tr style=""><td>8</td></tr>
    <tr style=""><td>9</td></tr>
    <tr style=""><td>10</td></tr>
    <tr style=""><td>11</td></tr></tbody>
  </table></span>
  </div>
</div>