Javascript sorting with callbackss

Question

I have several links for sorting current elements on page.

Functions:

A - click handler with array sort
B - display elements according to sorted array.

Sorting can take even 2 seconds, so I want to display some feedback to user.

I thought about change link text to 'In progress..' or something like that.

In fun A store old link text and change it to 'In progress' and pass another function to B that I invoke after display elements to show old text of link, but it just doesn't work.

In debugger link text is changed, but I can see only old text all the time.

How can I create valid callback for this?

I see websites with similar sorting and without any feedback to user too.

Is this possible to do with javascript? Or feedback can be display only on ajax request?

mhm... if you change the link text before starting the sort imho this should work. Can you post some code snippet? — Chris
– Chris, Commented Aug 26, 2011 at 14:28

user113716 · Accepted Answer · 2011-08-26 15:12:17Z

The issue is most likely that you're running entirely synchronous code.

The DOM does not update until whatever function(s) you've started have completed (even if you update the DOM before the long running calculation).

Here's an example of a long running calculation that prevents the DOM from updating immediately. (Click the "Render" button at the top to see the example properly.)

Notice in the example that the "Starting... Wait a few seconds." text appears immediately, and is not blocked by the long running calculation. But the "Updated" text takes 3 seconds to appear.

The reason for this is because I added the "Starting..." to the DOM first, then wrapped the rest of the code in a setTimeout. This allowed the DOM to update immediately for "Starting...", but the rest of the code within the setTimeout is synchronous, so the DOM won't update again until that code is complete.

So your solution can be to update the text with "In progress...", then wrap the rest of the code in a setTimeout() in order to allow the DOM to update immediately with your progress message.

element.innerHTML = "In progress...";

setTimeout( function() {
    // invoke the sorting code
}, 0);

Collectives™ on Stack Overflow

Javascript sorting with callbackss

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related