multiple Javascript run in parallel

Question

I have a quite complex .Net page with an intensive usage of a third party libraries (DevExpress). My page is composed of several parts:

• A "Result Browser" to let user select the content of two widgets:
  • A Table widget
  • A Graphic widget
• A timer (AspxTimer) to refresh the "Result browser" contents
  
• A time widget which gives time every second
  

I make an intensive use of CallBacks (AspxCallBack) to minimize the volume of data to transfer from/to the server for the refresh of the browser/table and graphic. During tests, each element separately is working well but one of the feature of the table is to re-calculate sub totals of the table when user click on a specific button. I have marked the correct subTotal cells (containing the span) during table construction with appropriate properties so I can find them on client side with javascript (<span ... SubTotal='true'>0.0</span>) and have a vector of class (code, number) to store actual numbers do recalculate subTotal from.

. Here is my code:

 function recalcSubTotal() {
    $('span[SubTotal="true"]').each(function() {
        var subSpan = $(this);
        var sTrends = subSpan.attr('trendsTotal');
        var Trends = sTrends.split('|');
        var subTotal = 0.0;
        for (var i = 0; i < Trends.length - 1; i++) {
            subTotal += Decision[Trends[i]];
        }
        subSpan.html(subTotal.toFixed(1));
    });
}

This works pretty well in an isolated page but when mixing all this stuff in a single page I randomely have NaN (Not a numer) codes returned by this func or wrong totals, click again the action button and it can work correctly. Nothing else but the relative complexity and parallel usage of javascript+callbacks can really explain this behavior. I managed to avoid any parallel Callback (chaining them) but can't do that with client side events or date/time timer. I wonder If there is a general clean way of dealing with client side parallel run (timer+callbacks+user actions). Thanks for any clue on this topic.

Answer 1

Try to call your function recalcSubTotal() with the methode setTimeout(), like this :

setTimeout(function(){
    recalcSubTotal();
}, 0);