0

私のページ<table>には、html ページでかなり大きなデータセット( ) をフェッチする ajax コードがあります。これを終えた後、私はこのテーブルで重い作業を行います ( datatablesで初期化する、行にクリックハンドラーを追加する、非表示の列を表示するなど) 魔女にはかなりの時間がかかります。

この初期化が行われている間、ページが動かなくなったように感じます。おそらく別のスレッドを使用して読み込み中の画像を表示し、計算が終了したらそれを閉じることはできますか?

SO に関する古い質問であるこのJavaScript とスレッドに出くわし、javascript のスレッドはすべての Web ブラウザーで完全にサポートされているわけではありません (つまり、gears プラグインが必要です)。

私がやりたいことをするのに役立つ新しいものはありますか?それはクロスブラウザですか? 多分いくつかのJQueryプラグインか、私が気付いていないものでしょうか?

更新 これはこれまでの私のコードです:

HTML:

            <div id="ajDiv">
                <div id="ajaxDiv1" class="ajaxDiv"></div> 
                <div id="tmpContainer" style="display:none;"></div>
            </div>

JS:

        function postForm(){

            $.ajax({
                type: 'POST',
                url: 'ajax.jsp',
                data: { 
                },
                beforeSend:function(){
                    $('#ajaxDiv1').html('<div class="loading"><img src="../images/ajax_loader.gif" alt="Loading..." /></div>');
                    $('#ajaxDiv1').show();
                    $('#tmpContainer').hide();
                },
                success:function(data){

                    $('#tmpContainer').html(data);

                    //UNTILL HERE EVERYTHING WORKS FINE
                    //FROM NOW ON THE PAGE FREEZES UNTILL THE
                    //DATATABLES INITIALIZE FULLY 

                    oTable = $('#example').dataTable({
                        "aaSorting": [[ 1, "asc" ]],
                        "bJQueryUI": "true" ,
                        "sPaginationType": "full_numbers",
                        "iDisplayLength": 100,
                        "aoColumns": [
                            null,null,null,null,null,null,null,null,null,
                            null,null,null,
                            { "sType": "date-euro" },
                            null,null,
                            { "sType": "date-euro" },
                            null,null
                        ]
                    }).columnFilter();


                    /* Add a click handler to the rows */
                    $("#example tbody").on("click",function(event) {
                        $(oTable.fnSettings().aoData).each(function (){
                            $(this.nTr).removeClass('row_selected');
                        });
                        $(event.target.parentNode).addClass('row_selected');
                    });
                    $("#example").on("dblclick", "tr", function() {
                        var iPos = oTable.fnGetPosition( this );
                        var aData = oTable.fnGetData( iPos );
                        var iId = aData[1];
                        $('#edit'+iId).click(); //clicks a button on the first cell
                    });

                    //MORE CODE HERE ...................


                    $('#ajaxDiv1').hide();
                    $('#tmpContainer').show();
                    $('#example').css('width', '100%').dataTable().fnAdjustColumnSizing();
                },
                error:function(){
                    $('#ajaxDiv1').html('<p class="errorMsg"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }
            });
        }
4

2 に答える 2

0

あなたの構造はこのようにする必要があります

    showLoader();
    $.ajax({
        url: '',
        dataType: '',
        async: false,    //<-- this depends on your needs.
        success: function(dataObj) {
                    //Do you initialization of datatables
                    hideLoader();
        },
    });

これがあなたのニーズに役立つと思います。ユーザーに何かをさせる前にテーブルがそこにあり、準備ができていることを望んでいるので、非同期であってはならないと思います。ajax呼び出しの後にあまり何もしなければ、非同期にすることもできますが。これにはスレッドは必要ありません。ajax (含まれるデータテーブルの初期化) が完了するのを待っているときに何かをしたい場合、ajax はデフォルトで非同期です。

EDIT showLoader と hideLoader は、画像を表示および非表示にするための関数です

アップデート

新しいのはhtml5 Web ワーカーだけです が、それだけの価値はないと思います。まだ完全にはサポートされていません。

于 2013-06-17T12:03:41.233 に答える
0

プロジェクトで [このプラグイン] を使用しています。

使い方は簡単です。

jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load(
    '/path/to/my/url', 
    {},
    function() {
      //
      //this is the ajax callback 
      //
      jQuery('#activity_pane').hideLoading();
    }
);

http://thisiscontext.com/tools/jQuery-showLoading

于 2013-06-17T12:10:25.320 に答える