Question

I recently ran into a familiar javascript/jQuery timing bug and spent too long debugging it. What I need is a smarter debugging path for this problem.

In specific, my issue was that user inputs were supposed to be causing a Mongo database call and the results were sent, after a little math, to displayed outputs. But the displayed outputs were crazily wrong. However, once I added a FireBug break point the problem went away. At that point I knew I had a timing issue, but not how to solve it.

Here are the relavant pieces of code before the error:

handleDataCallBack : function(transport) {
   var response = $.parseJSON(transport);

   if(!hasErrors) { this.updatePage(response); }
},

accessDatabase : function(){
   var params = { ... };
   DAL.lookupDatabaseInfo(this.handleCallBackOutputPanel, this, params);
},

calculateValues: function() {
   // some numerical values were updated on the page
}

onDomReady : function() {
// ...
   //bind drop-down select change events
   $('#someDropDown').change(function() {
      me.accessDatabase();
      me.calculateValues();
   });
}

To fix the problem, all I had to do was move the “calculateValues” method from the onDomReady inside the call back:

handleDataCallBack : function(transport) {
   var response = $.parseJSON(transport);

   this.calculateValues();
   if(!hasErrors) { this.updatePage(response); }
},

The problem was that the database hadn’t responded before the calculations were started. Sure, that’s easy to spot in retrospect. But what methods can I use to debug asynchronous timing issues in javascript/jQuery in the future? This seems well outside the context of IDE tools. And FireBug didn’t help. Are there any tools for tracking down asynchronous web development issues? Or maybe some time-tested methods?

Answer 1

i assume your problem is caused here:

$('#someDropDown').change(function() {
    me.accessDatabase();
    me.calculateValues();
});

this issue is that your calculations are done just right after the call. seeing that the DB call is async, calculate does not wait for it. however, you can do it using “callbacks”. i see you do try to implement it and yes, it is correct. however, i find this more elegant:

calculateValues: function() {
    // some numerical values were updated on the page
},

//since this is your general callback hander
//you hand over the return data AND the callbackAfter
handleDataCallBack: function(transport, callbackAfter) {
    var response = $.parseJSON(transport);

    //you may need to use apply, im lost in scoping here
    callbackAfter();
    //or
    callbackAfter.apply(scope);

    if (!hasErrors) {
        this.updatePage(response);
    }
},

accessDatabase: function(callbackAfter) {
    var params = {};

    //pass callbackAfter to the function,
    //after this is done, pass it to the handler
    DAL.lookupDatabaseInfo(this.handleCallBackOutputPanel, this, params, callbackAfter);
},

onDomReady: function() {
    $('#someDropDown').change(function() {
        me.accessDatabase(function() {
            //send over what you want done after. 
            //we'll call it "callbackAfter" for easy tracing
            me.calculateValues();
        });
    });
}​