Is there a way to notify users that the site is loading while a function with noticeable execution time is running? I have an associated change function which is connected to a drop down filter used for sorting through data on the page.
$("#job_group").change(function() {
console.log("Change");
$("#displayTable").css("opacity", "0.5"); // temporarily gray out the table during execution
// Code that needs to run
showResults();
$("#displayTable").css("opacity", "1"); // revert back to normal once done
console.log("Completed");
});
The console logs indicate that the desired behavior is being achieved, however, the initial css change seems to be ignored as it quickly reverts back even though the code execution takes time.
The expected sequence of events:
- Execute Change Function
- Set table opacity to opaque
- Filter results
- Restore table opacity to normal
EDIT
Show Results function retrieves the number of results
function showResults() {
let count = 0;
$(".jd-row").each(function() {
if($(this).css("display") !== "none" && !$(this).hasClass("jd-row-expand")) {
count++;
}
});
$("#results").html(count + "");
}