jQuery sort function freezing a (previous) show() text

Question

Hi all. I'm sorting a list of species, but sometimes the list is large and it takes several seconds to sort it. Thus, I tried adding a small notice to let our users know there's something running (and they should wait). Please just check this page: http://ibc.lynxeds.com/family/babblers-timaliidae And click on "Sort and Filter [+]". Then, click on any "Sort by" link.

With Opera, you will first get a message, then it starts sorting the species, then the message changes to a different text and that's all. With FF or IE, the first message isn't displayed, and you just know the CPU is doing some work, then the "Done!" message is shown and fades out.

So, in the worst case (slow CPU, large list), you might be waiting for 20 seconds and then you get that Done! message (it would be much better to show the "please wait" first, and just fade out when done...)

The JQuery code that calls the sort function is this:

$(".s_alf_eng").toggle(
 function() {
   $(".warning").text("Sorting... please wait").show(); //warning is an empty div
   $('.media-status-specie li').sort(sortAscending1).appendTo('.media-status-specie');
   $(".warning").text("Sorting... Done!").fadeOut(700);
      },
 function() {
   $(".warning").text("Sorting... please wait").show();
   $('.media-status-specie li').sort(sortDescending1).appendTo('.media-status-specie');
   $(".warning").text("Sorting... Done!").fadeOut(700);
      });

It works perfect in Opera. I don't understand why in the other browsers the first message is not shown.

What can I do to force FF and IE to display the "Please wait" message before starting the sort?

A related question is how to speed up the sorting (it can take up to 20 seconds for the largest family, in my core2duo...).

Thank you for any suggestion!

EDIT: The sort function is found here: stackoverflow.com/questions/1531176

Answer 1

Firstly, what are you using to sort i.e. what is in sort()?

Secondly, is there a callback function that can be used to set the "Done!" message after the sort has finished?

Thirdly, the sort may be able to be sped up, depending on the sorting algorithm used in sort(). If you can provide more details, I should be able to help further.

Answer 2

Just as a test, what happens if you change:

$('.media-status-specie li').sort

to

$('.media-status-specie').find('li').sort....

or, better yet:

<ul id="media-status-specie" class="media-status-specie">

and then:

 $('#media-status-specie').find('li').sort.....

Just as an FYI, I get a browser warning message about slow running script, I let it run and it does finish. It is several seconds before I see the warning message you post by the way.