使用javascript在后台運行任務

Question

我有一個小部件，每當用戶提交表單時，該小部件都會顯示一個“正在等待”的圖像，並通過以下代碼實現：

<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);       
});         

這具有使屏幕變灰，顯示微調器的期望效果，然后在完成表單提交后，將用戶定向到目標頁面。

但是，有時提交表單時不會進行重定向-具體來說，如果用戶選擇要下載文件，我將返回文件本身，並終止阻止重定向發生的過程。 發生這種情況時，微調框將保留在前台，阻止用戶與站點進行交互-而不是所需的行為。

我怎么能這樣說，在X秒鍾后（考慮到應用程序的目標使用情況，這就足夠了），停止/隱藏微調框-也就是說，允許提交表單，然后顯示微調框，然后隱藏它（雖然此功能以不同的順序執行-顯示微調框，然后提交表單）？

Answer 1

使用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
});