1

次のコードがあります。これは、進行状況バーのあるモーダルダイアログを開くことになっています。ajax呼び出しがバックグラウンドで1つ進むと、プログレスバーが進むはずです。問題は、forループが完了するまでダイアログボックスが開かず、すべてのajax呼び出しが完了することです。どういうわけか関数になっていると思います.promose()が、この場合の実装方法がわかりません。誰かが私を助けることができますか？ 

jQuery('#div_id')
    .button()
    .click(function(){
        var grid = jQuery('#grid_id');
        var sel_ar = grid.jqGrid('getGridParam', 'selarrrow');
        var last_id = 0;

        //open modal progress bar to display the progress of the emails
        jQuery('#dialog').html('<div id="progressbar"></div>');
        jQuery('#dialog').dialog({
            modal: true
        });
        jQuery('#dialog').dialog('open');

        for (var i = 0;i < sel_ar.length;i++){
            var orderid = jQuery('#grid_id').jqGrid('getCell', sel_ar[i], 'order_id');

            if (last_id != orderid){
                jQuery.ajax({
                    async: false,
                    url: "/scripts/ajax/script.php",
                    type: "post",
                    data: "orderid="+orderid,
                    success: function(data){
                        if (data != "true"){
                            alert(data);
                        }
                        jQuery('#progressbar').progressbar({ value: Math.round((i/sel_ar.length)*100) });
                    }
                });
            }
            last_id = orderid;
            pausecomp(1000);
        }
        //jQuery('#dialog').dialog('close');
        jQuery("#keys_list").trigger("reloadGrid");
        jQuery("#purchased_users").trigger("reloadGrid");
    });

これpausecomp()は、特定のミリ秒数だけ一時停止する関数です。forループを完了するのに時間がかかることを確認するためにこれを入れようとしていたので、プログレスバーがカチカチ音をたてるのを見ることができました...残念ながら、プログレスバーがポップアップするのを待つ時間が長くなりましたすべてが完了しました。

私は問題を説明するフィドルを作りました。forループが終了してプログレスバーが更新されるまで待機する方法に注目してください。http://jsfiddle.net/YxGqG/5/

ありがとう！

4

2 に答える 2

3

asyncfalseを削除する必要があります。ブラウザがロックされ、ダイアログが表示されていない場合は、ajaxリクエストが完了するまで表示されません。さらに、async：falseを使用すると、プログレスバーの更新が不格好になります。

「async：false」の行を削除すると、進行状況バーの更新で状態の問題を修正する必要があります。この問題を修正した後、これは希望どおりに機能します。

また、プログレスバーの更新で見られるその遅れは、async：falseを使用しているためです。ブラウザのUIスレッドはjavascriptと競合状態にあり、非同期falseでajax呼び出しを押すと、進行状況バーの表示を変更するための「処理中」のUI更新を含め、すべてが停止します。それはハイレベルです。

ここで更新します：http：//jsfiddle.net/xe8wF/2/（99％で停止する原因となったバグを修正しました）

于 2012-07-17T13:51:06.627 に答える
1

プログレスバーを機能させるために使用できるアイデアの1つを次に示します。（コードと統合するには、プログレスバーをいじる必要がありますが、これが、プログレスバーを更新するためにajaxを処理する方法を理解するのに役立つことを願っています。

function changeProgress(position) {
    $('#progressbar').progressbar({
            value: position
    });
}

function updatePosition() {
    var position;
    $.post('ajax/get_progress', function(data) {
      // determine position from data - and store it into position
      position = ...;
      changeProgress(position);
      if(position < 100) {
          updatePosition();
      }        
    });
}

これが物事をより明確にすることを願っています。

于 2012-07-17T14:22:03.447 に答える