更改选择框时，叠加div不显示

Question

我有一个表，表头中有筛选行的选择框。这是一个大表，对具有长字符串的文本列进行筛选可能需要一些时间。我希望在进行筛选时显示一个覆盖，并在筛选完成时将其隐藏。

$('#budget-table select').change(e => {
$('#overlay').show()
// get the selected options of all the filters at the top.
const filters = $('#budget-table th select').find(':selected').map((ind, elt) => elt.innerText)
$(`#budget-table tr`).each((trInd, trElt) => {
if (trInd == 0) return true // skip the header row
let showRow = true
// If the filter is not 'All' and the cell value doesn't match the filter, hide the row.
$(trElt).children().each((tdInd, tdElt) => {
if (filters[tdInd] !== 'All' && filters[tdInd] !== tdElt.innerText) {
showRow = false
return false
}
})
showRow ? $(trElt).show() : $(trElt).hide()
})
$('#overlay').hide()
})

#overlay {
background-color: #333;
display: none;
height: 100%;
left: 0;
opacity: 0.6;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="project-list">
<table class="table table-hover table-striped table-rwd" id="budget-table">
<tr>
<th>
<select class="filter-select" data-columnindex="0" id="filter-input-0">
<option>Option 1</option>
<option>Option 2</option>
<option>...</option>
<option>Option n</option>
</select>
<div>
Territory
</div>
</th>
<th>...several more filters with the same structure</th>
</tr>
<tr><td colspan="2">...several hundred rows of table data</td></tr>
</table>
</div>
<div id="overlay"> </div>

覆盖没有显示。但是，如果将$('#overlay').show()移动到外部each()函数之后，则会显示覆盖。我错过了什么？

Answer 1

each循环将异步运行。要等待循环结束，请使change回调异步，并在each循环之前添加await。

$('#budget-table select').change(async e => {
$('#overlay').show()
// get the selected options of all the filters at the top.
const filters = $('#budget-table th select').find(':selected').map((ind, elt) => elt.innerText)
$(`#budget-table tr`).each((trInd, trElt) => {
if (trInd == 0) return true // skip the header row
let showRow = true
// If the filter is not 'All' and the cell value doesn't match the filter, hide the row.
await $(trElt).children().each((tdInd, tdElt) => {
if (filters[tdInd] !== 'All' && filters[tdInd] !== tdElt.innerText) {
showRow = false
return false
}
})
showRow ? $(trElt).show() : $(trElt).hide()
})
// artificial delay
await new Promise(r => setTimeout(r, 500));
$('#overlay').hide()
})

#overlay {
background-color: #333;
display: none;
height: 100%;
left: 0;
opacity: 0.6;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="project-list">
<table class="table table-hover table-striped table-rwd" id="budget-table">
<tr>
<th>
<select class="filter-select" data-columnindex="0" id="filter-input-0">
<option>Option 1</option>
<option>Option 2</option>
<option>...</option>
<option>Option n</option>
</select>
<div>
Territory
</div>
</th>
<th>...several more filters with the same structure</th>
</tr>
<tr>
<td colspan="2">...several hundred rows of table data</td>
</tr>
</table>
</div>
<div id="overlay"> </div>