JavaScript Race Conditions

time to read 8 min | 1526 words

About a week ago I posted how to handle Multiple Cascadiong Drop Downs using MS Ajax. That worked, except sometimes it didn't work.

Took me a while to figure out that there was a race  condition there. Let me tell you, Javascript in the browser is not the language for tracking down threading issues. At any rate, here is the fix.

function changeOnParentChangeOnProductsToAvoidRaceConditions()

{

      var behaviors =  Sys.UI.Behavior.getBehaviors($('<%=Benefits.ClientID%>'));

      if(behaviors == null || behaviors.legth==0)

      {

            //wait for the behavior to be defined.

            setTimeout("changeOnParentChangeOnPoliciesToAvoidRaceConditions()", 10);

            return;

      }

      for( var i=0; i<behaviors.length;i++)

      {

            var behavior = behaviors[i];

            //required to get around race condition

            behavior._oldBenefitsOnParentChange = behavior._onParentChange;

            behavior._onParentChange = function()

            {

                  if( $('<%= Insurances.ClientID %>').selectedIndex == 0)

                  {

                        return;

                  }

                  behavior._oldBenefitsOnParentChange ();

            }

      }

}

Event.observe(window, 'load', function() {

      changeOnParentChangeOnProductsToAvoidRaceConditions();

});