使用javascript在后台运行任务

Question

I have a widget that displays a "waiting" image whenever a user submits a form, implemented with the following code:

<div id="shading"></div>
<div id="spinner-wrapper">
    <div id="spinner-target"></div>
</div>


$("form").submit(function() {
    $("#spinner-wrapper").css({"visibility": "visible", "display": "block" });
    $("#shading").css({"z-index": "97"});
    var target = document.getElementById('spinner-target');
    var spinner = new Spinner(opts).spin(target);       
});         

This has the desired effect of graying out the screen, showing the spinner, and then when the form is done submitting, the user is directed to the target page.

However, sometimes the form is being submitted such that there is no redirect - specifically, if the user selects that they want to download a file, I return the file itself, and kill the process to block the redirect from occurring. When this happens, the spinner remains in the foreground, blocking the user from interacting with the site - not the desired behavior.

How could I somehow say that after X number of seconds (considering the target usage of the application, this would suffice), to stop/hide the spinner - that is, allow the form to be submitted, then show the spinner, then hide it (while this function does that in a different order - shows the spinner, then submits the form)?

Answer 1

Use window.setTimeout():

$("form").submit(function() {
    $("#spinner-wrapper").css({"visibility": "visible", "display": "block" });
    $("#shading").css({"z-index": "97"});
    var target = document.getElementById('spinner-target');
    var spinner = new Spinner(opts).spin(target);       

    window.setTimeout(function() {
      //Hide the spinner here
    }, 5000); //Wait five seconds before running the callback function
});