CODEWITHSUNDEEP
javascriptcallbackusability
Codium
Codium

Reputation: 3240

Javascript sorting with callbackss

I have several links for sorting current elements on page.

Functions:

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?

Upvotes: 0

Views: 1007

Answers (1)

user113716
user113716

Reputation: 322562

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);

Upvotes: 3

Related Questions