Загрузка анимации во время сортировки JavaScript

Question

У меня есть таблица данных, сортируемая в алфавитном порядке, и это довольно большая таблица. Поэтому сортировка занимает 2-3 секунды. Проблема заключается в том, что этот скрипт сортирует данные, которые блокирует страница. Поэтому я хотел бы отобразить анимацию загрузки (или просто загрузить текст) за это время. Прямо сейчас, моя загрузка gif появляется только ПОСЛЕ завершения скрипта - несмотря на то, что я использую setInterval или setTimeout. Должно быть, чего-то не хватает. Как я могу отобразить загрузку текста или изображения перед запуском скрипта? код ниже:

$("#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).

Answer 1

Изменение этого:

setInterval(timeOut(), 1000); 

(что означает "вызов timeOut(), а затем вызвать setInterval(...) с помощью обратного значения timeOut() как первый аргумент") к этому:

setTimeout(timeOut, 1000); 

(который означает «вызов setTimeout(...), передав функцию timeOut в качестве первого аргумента»).

Answer 2

Я бы порекомендовал вам выполнить эту работу партиями. Это позволяет выполнять всю работу, но не замораживать страницу.

Существуют шаблоны для этого.

См. this page и функцию yeildingEach.

В этом случае я бы наложил анимационное изображение «loading ...» в абсолютно позиционированном DIV. .show() div перед запуском сортировки, затем .hide() div после его завершения.

Answer 3

Если вы показываете достаточно данных, чтобы сортировка блокировала браузер в течение нескольких секунд, вам действительно стоит подумать о переходе с виртуальной таблицы прокрутки. Мое избранное: SlickGrid.

Вместо того, чтобы просто визуализировать гигантскую таблицу, вы храните свой набор данных в гораздо более легких объектах JS в памяти. (Который, следовательно, может быть отсортирован на порядок быстрее, чем сортировка на основе DOM, которую вы в настоящее время используете.) SlickGrid только визуализирует элементы DOM для части просматриваемой вами таблицы, поэтому в браузере гораздо меньше нагрузки ,

Вы также можете выбрать load small chunks вашего набора данных за один раз (бэкэнд реализован как простая разбивка на страницы), что дает вам возможность эффективно отображать бесконечные строки в браузере с постоянной производительностью.