更改 select 框時未出現疊加 div

Question

我有一個表格，表格標題中有 select 個框，用於過濾行。 這是一個大表，過濾包含長字符串的文本列可能需要一些時間。 我希望在進行過濾時出現一個覆蓋層，並在過濾完成后將其隱藏。

 $('#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() function 之后，將顯示疊加層。 我錯過了什么？

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>