javascript - 点击后JS阻塞按钮,运行代码后解除阻塞
问题描述
我无法解决这个问题,我的小提琴:
<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>
解决方案
这是我的建议
$(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>
推荐阅读
- flutter - 根据月份颤动日历轮播显示事件
- java - net.sf.jasperreports.engine.JRException:java.net.MalformedURLException:无法调用“String.length()”,因为“spec”为空
- kotlin - Kotlin 反射获取参数作为字符串
- .net - InitializeComponent() 不存在 - 多目标项目 (4.6.1 & 5)
- teradata - 通过 .NET 连接器查询的错误结果,但直接在 Teradata Studio 中更正了结果
- sql - 每个点返回的行数 PostGIS
- javascript - Nodemailer连接错误仅在服务器上
- r - ggplot2如何仅对数据的某些行着色
- java - 将jOOQ表达式分配给局部变量时如何防止Eclipse添加@NotNull注释
- python - 在 python 套接字服务器上从客户端接收文件