0

我的页面中有一个 ajax 代码，它<table>在我的 html 页面中获取一个相当大的数据集（）。完成此操作后，我在此表上进行了大量工作（使用datatables对其进行初始化，在行上添加点击处理程序，显示隐藏列等），这需要大量时间。

在进行初始化的这段时间里，感觉就像页面被卡住了。我可以使用另一个线程显示加载图像并在计算完成时将其关闭吗？

我遇到了这个JavaScript and Threads，这是关于 SO 的一个老问题，并说 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 是异步的

编辑 showLoader 和 hideLoader 是您显示和隐藏图像的功能

更新

唯一的新东西是html5 网络工作者 ，但我认为这不值得。它还没有完全支持。

于 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 回答