2

この質問は同時実行の問題を扱います。ビジー アイコンを表示する方法に関する提案については、次の質問を参照してください。

ユーザーがページで AJAX リクエストを開始するとき、ある種の「作業中」またはビジー状態のアイコンまたは進行状況インジケーターを表示すると便利です。長時間実行されるプロセスが 1 つしかない場合、これは比較的簡単な方法で処理できます。

function do_action() {
   show_busy_icon();       

   long_running_asynchronous_process(function() {
      // Callback function run when process finishes
      hide_busy_icon();
   });
}

ただし、ページで複数の非同期プロセスが実行されている場合、on/off メソッドを使用しても機能しません。追加のプロセスが実行されていても、最初に終了したプロセスによってアイコンがオフになります。

では、1 つ以上のプロセスが実行されている場合はオンになり、プロセスが実行されていない場合はオフになるインジケーターを Web ページに表示するにはどうすればよいでしょうか?

実行中のプロセス数のカウントを維持することは可能だと思います。hide_busy_icon()プロセス数が0の場合にのみアイコンを非表示にします。これはちょっと失敗しやすいようです。おそらく、私が見ていないより良い/より簡単な方法があります。

あなたのアイデアや提案をありがとう！

編集:マークされた回答のソリューションをしばらく使用した後、非常にうまく機能していると言ってうれしいです。私が遭遇した唯一の問題は、自分のスクリプトが自分が制御していないスクリプトの関数を呼び出す場合です。これらの関数がコールバックの提供を許可しない限り、開始時と終了時にプロセス数を更新する方法はありません。

これが発生する可能性がある場所の例は、一連のマーカーを Google マップに追加することです。スクリプトが Google マップ関数を呼び出すと、ビジー アイコンは消えますが、マーカーはまだ読み込まれています。

これを処理する良い方法がわかりません。

4

6 に答える 6

8

すべてのアクションに同じビジー インジケータが必要な場合は、カウンターを使用します。

「show_busy_icon()」の代わりに、「increment_busy_count()」を実行します。これは、ビジー カウントが 0 から 1 になる場合に「show_busy_icon()」を呼び出します。「hide_busy_icon()」の代わりに、「decrement_busy_count()」を呼び出します。ビジー カウントが 1 から 0 になる場合は、"hide_busy_icon()"。

于 2008-12-09T18:47:24.843 に答える
1

問題は、1 つのインジケーターしか使用していないことにあると思います。インジケーターが必要なアクションごとにインジケーターを用意する方が簡単な場合があります。

そのため、ページに複数の検索がある場合、各検索領域には、適切な JavaScript 関数で表示または非表示にされる独自の独立したインジケーターがあります。

于 2008-12-09T18:40:39.817 に答える
1

プロトタイプにはこれが組み込まれています。と呼ばれるプロパティはAjax.activeRequestCount、特定の時点でアクティブなリクエストの数を追跡します。また、グローバルな Ajax レスポンダーを設定して、「ビジー」アイコンを非表示にするか表示するかを決定することもできます。

于 2008-12-09T20:34:18.277 に答える
0

別の解決策を提案します。これはテスト済みのコードではなく、おそらく動作しないでしょうが、概念の説明です。

同じ正確なアクションが複数のインスタンスで実行されていないと仮定します。これを行うのは、通信におけるタイムアウトまたは同様の問題によってインジケーターがハングしないようにするためですが、通信が再確立されたときにインジケーターを解決できるようにするためです。

 var actionRegister = new Array();

 function register_action(actionId)
 {
     show_busy_icon();       
     if(blockedTile.indexOf(actionId) != -1)
     {  // element already registered
        return;
     }
     actionRegister.push(actionId)
}


function unregister_action(actionId)
{
    var idx = blockedTile.indexOf(actionId);
    if(idx  != -1)
    {  
        actionRegister.splice(idx,1);
    }

    if(actionRegister.length < 1)
    {
       hide_busy_icon();
    }
}
于 2012-04-18T09:03:41.120 に答える
0

私たちは皆、それを間違った方法で見ています。Ajax 呼び出しは、XHR を使用してコンテンツをロードするために使用されます。これは、コンテンツが読み込まれる DOM 全体に事前定義された要素が必要であることを意味します。このタイプの html があるとします:

<html>
<body>
   <div id="content_1">
   </div>
   <div id="content_2">
   </div>
</body>
</html>

jQuery を使用して、それぞれ content_1.php と content_2.php から content_1 と content_2 にロードしたいとします。

ajax を処理するには、次のスクリプトを使用します。

$("content_1").html("<img src='loading.gif'>").load("http://samplesite.com/content_1.php");

$("content_2").html("<img src='loading.gif'>").load("http://samplesite.com/content_2.php");

これにより、読み込み中の gif がそれぞれの div に配置され、gif は後で php から読み込まれたコンテンツに置き換えられます。シンプルな 1 行のスクリプト。カウンター不要。

要件: jQuery の最新バージョン。

于 2012-12-31T09:18:03.570 に答える
0

ここで私の答えを見てください：

サイトコンテンツの読み込み中に読み込み画面を表示する方法

正確にこれを行う方法の小さな、実際に動作する JavaScript の例を示します。お役に立てば幸いです。

于 2008-12-09T18:40:33.110 に答える