在JavaScript排序期間加載動畫

我有一個按字母順序排序的數據表，它是一個相當大的表。所以排序需要2-3秒。問題是，該腳本正在排序頁面鎖定的數據。所以我想在這段時間內顯示一個加載動畫（或只是加載文本）。現在，我的加載gif僅在腳本完成後出現 - 儘管我使用了setInterval或setTimeout。必須有一些我錯過了。 如何在腳本運行之前顯示加載文本或圖像？代碼如下：在JavaScript排序期間加載動畫

$("#rotateArrowA").click(function() { 

     $(function() { 
       $("#loadingTwo").css("display","block"); 
       $("#rotateArrowA").css("display","none"); 
       $("#rotateArrowDownA").css("display","block"); 
       setInterval(timeOut(), 1000); 
     }); 

    function timeOut() { 

      var rows = $("#tableTwo tbody tr").get(); 

      rows.sort(function(a, b) { 

       var A = $(a).children("td").eq(1).text().toUpperCase(); 
       var B = $(b).children("td").eq(1).text().toUpperCase(); 

       if(A > B) { 
       return -1; 
       } 

       if(A < B) { 
       return 1; 
       } 

       return 0;  

      }); 

      $.each(rows, function(index, row) { 

       $("#tableTwo").children("tbody").replaceWith(rows); 
        $("#tableTwo tbody tr:odd").css("background-color", "#E6E6E6"); 
      $("#tableTwo tbody tr:even").css("background-color", "white"); 

      }); 

    } 


    });

而且，我不能使用任何HTML 5個功能，對多線程...這有舊版客戶端的工作（IE 7-8）。

來源

2012-03-28 mdance

更改此：

setInterval(timeOut(), 1000);

本（意思是「呼叫timeOut()，然後使用timeOut()的返回值作爲第一個參數調用setInterval(...)」）：

setTimeout(timeOut, 1000);

（其意味着「呼叫setTimeout(...)，傳遞函數timeOut作爲第一個參數」）。

來源

2012-03-28 22:37:54 ruakh

非常接近...它的工作原理。現在我有一個新問題 - 數據排序後頁面掛起。 – mdance 2012-03-28 22:40:59

@mdance：你把'setInterval'改成'setTimeout'了嗎？ – ruakh 2012-03-28 22:41:37

只是注意到了，做到了。現在工作！萬分感謝！ – mdance 2012-03-28 22:42:33

我建議你分批做這項工作。這使您可以完成所有工作，但不能凍結頁面。

有這樣做的模式。

請參閱this page，以及yeildingEach函數。

在這種情況下，我會在絕對定位的DIV中覆蓋「loading ...」動畫圖像。 .show() div開始排序之前，然後.hide() div完成後。

來源

2012-03-28 22:41:07 Cheeso

這是一個很好的建議，我可能會在未來實現這一點。 – mdance 2012-03-28 22:49:04

如果您顯示足夠的數據，排序鎖定瀏覽器幾秒鐘，您應該考慮使用虛擬滾動表來代替。我最喜歡的是SlickGrid。

不僅僅是渲染一個巨大的表格，而是將數據集存儲在更輕量級的內存JS對象中。（因此，它的排序可能比您當前使用的基於DOM的排序快一個數量級。）SlickGrid只會爲您正在查看的表格部分呈現DOM元素，因此瀏覽器上的緊張程度要低得多。

您也可以一次選擇數據集的load small chunks（後端實現爲簡單分頁），使您能夠在瀏覽器中有效地顯示具有恆定性能的無限行。

來源

2012-03-28 22:49:31 josh3736

在JavaScript排序期間加載動畫

回答

相關問題