javascript critical sections or semaphore problem

Question

function myobj(){
  var gup=this;
  this.lastindex=-1;
  this.criticalSectionInTimer=0;
  this.updateTimer;

  this.start = function(l){
      if((typeof this.updateTimer)=="number"){
        clearInterval ( this.updateTimer );
      }
      this.updateTimer=setInterval(function() {gup.getMessages();} , 30);
    }

    this.stop= function(){
      if((typeof this.updateTimer)=="number"){
        clearInterval ( this.updateTimer );
      }  
    }

  this.addUpdate(i){
    //some code
  }

  this.rrrrnr=0;

  this.getMessages = function (){
    if(this.criticalSection==0){
       this.criticalSection=1;
      this.rrrrnr++;
      console.log("in critical section"+this.rrrrnr);
         var url="getmessages.php?lastindex="+this.lastindex;
         $.getJSON(url,
             function(data){
              gup.lastindex=data.lastindex;
              $.each(data.updates, function(i,item){
                gup.addUpdate(item);
              });
           }
         );
       console.log("out critical section"+this.rrrrnr);
       this.criticalSection=0;
    }
  }

}

var m= new myobj();
myobj.start();

I have the code from above. I have a main loop which makes updates at a given time interval. The problem is i have realized that it is getting in the "critical section" which I have delimited by the variable this.criticalSection .

From firebug i get the messages "in critical section" + index and "out critical section" +index in the right order but the ajax request is still being processed. But I get request with the same index and i really don't know where to look for the problem.

Are there any buildin features for semaphores or critical sections in javascript?

Answer 1

jQuery send AJAX Async by default. Insted of doing getJSON try:

$.ajax({
  dataType: 'json',
  url:  url,
  type: 'GET',
  async: false,
  success: function(data){
              gup.lastindex=data.lastindex;
              $.each(data.updates, function(i,item){
                gup.addUpdate(item);
              });
});

Answer 2

The proble is fairly simple.

You are using AJAX, which, by definition, is asynchronous. That means, you execute $.getJSON, and the js will continue and exit the critical section while the request is being processed. Therefore, several calls to getMessages can be performed before the first requests completes.

It seems that you intend such a getJSON call NOT not be async, and be blocked within the critical section until it ends. To do so, you must set the async property to false, something in the lines of:

$.ajax({
  dataType: 'json',
  url:  "getmessages.php?lastindex="+this.lastindex,
  type: 'GET',
  async: false,
  success: function(data){
      gup.lastindex=data.lastindex;
      $.each(data.updates, function(i,item){
          gup.addUpdate(item);
      });
});

Answer 3

http://stackoverflow.com/questions/2078235/ajax-concurrency/2078623#2078623

Check out a similar, but simpler example