1

ユーザーがフォームを送信するたびに「待機中」の画像を表示するウィジェットがあり、次のコードで実装されています。

<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秒後に（アプリケーションのターゲット使用法を考慮すると、これで十分です）、スピナーを停止/非表示にする、つまり、フォームの送信を許可し、スピナーを表示してから非表示にするにはどうすればよいでしょうか(この関数は別の順序でそれを行いますが、スピナーを表示してからフォームを送信します)?

4

1 に答える 1

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
});
于 2013-03-18T20:05:20.210 に答える