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

Question

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

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

每次我单击该按钮都会获得状态类型“焦点”，如果我多次单击它会多次执行 searchMatchTablee function。

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

在 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>

Answer 2

 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>