Question

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

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

我遇到了这个JavaScript and Threads，这是一个关于SO的老问题，并且说javascript中的线程并不是所有网络浏览器都完全支持（即需要齿轮插件）。

有什么新东西可以帮助我做我想要的，它是跨浏览器？也许是一些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>');
                }
            });
        }

Answer 1

你的结构应该是这样的

    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 web workers 但我不认为这是值得的。它还没有完全支持。

Answer 2

我在项目中使用[this plugin]。

它易于使用。

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

显示加载图像，而javascript负载很重

2 个答案: