0

ajax リクエストを行うときは、常に Ajax ロード アイコンを使用します。

通常の JavaScript コードだけで同じことを達成できるかどうかを知りたいです。例えば：

$('button').on('click', function(){
    showLoadingBar();
    longProcess();
    hideLoadingBar();
});

longProcess() は、処理に 1 ～ 3 秒かかる関数です (多くの計算を行い、DOM を操作しますが、ajax リクエストは行いません)。

現在、ブラウザはこの 1 ～ 3 秒間停止またはフリーズするため、この間にロード アイコンを表示することをお勧めします。これは可能ですか？上記のコードは、showLoadingBar() をほとんど無視しています。

4

3 に答える 3

4

現在の Javascript プロセスが終了するまで DOM は更新されないため、そのままでは実行できません。setTimeoutただし、それを回避するために使用できます。

showLoadingBar();
setTimeout(function() {longProcess(); hideLoadingBar(); }, 1);

明確でない場合に上記で何が起こるかはshowLoadingBar、それが実行され、タイムアウトが設定されることです。その後、現在のプロセスが終了し、タイムアウトが呼び出される直前に DOM が読み込みバーで更新できるようになります。ハンドラーは重い関数を実行し、完了すると、読み込みバーを再び非表示にします。

于 2012-11-05T21:03:33.710 に答える
1

以下は、クリック時のアクションを制御できるようにします。これが意味するのは、実行が終了するまでクリック機能を無効にできるということです。しかし、ブラウザに制御を戻すsetTimeoutも含めて（したがって、その煩わしい「ロックアップ」感を取り除きます）、タイムアウト関数で長いプロセスを実行してから、ボタンを再度有効にします。ビオラ！

function startProc() {
    var $this = $(this);
    $this.off("click", startProc);
    showLoadingBar();
    setTimeout(function() {
        longProcess();
        hideLoadingBar();
        $('button').on('click', startProc);
    });
}

$('button').on('click', startProc);
于 2012-11-05T21:12:40.903 に答える
-3

お前、

.bindメソッドを使用します。この場合、次のように実行されます。

$('button').bind('click', function(){
    showLoadingBar();
    longProcess();
    hideLoadingBar();
});
于 2012-11-05T21:08:51.370 に答える