Critical javascript sections or semaphore issue

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 a code on top. I have a main loop that makes updates over a certain period of time. The problem is that I realized that it falls into the "critical section", which I divided into the variable this.criticalSection.

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

Are there any built-in functions for semaphores or critical sections in javascript?

Answer 1

There are no semaphores or critical sections because JavaScript is single-threaded. The ajax call you make is asynchronous, so it starts the request, and then happily keeps going and leaves your critical section. As others have noted, a simple solution is to make the request synchronous, but that defeats the goal of ajax.

By looking at your code, it seems like you are trying to get updates at regular intervals. If so, why not plan the next update in the ajax request callback?

 this.getMessages = function (){ var url="getmessages.php?lastindex="+this.lastindex; $.getJSON(url, function(data){ gup.lastindex=data.lastindex; $.each(data.updates, function(i,item){ gup.addUpdate(item); }); gup.updateTimer=setTimeout(gup.getMessages, 30); } ); } 

This eliminates the need for semaphores and is more consistent with the nature of JavaScript caused by events. The disadvantage is that updates are not performed at exact intervals. In addition, 30 milliseconds seems to be an extremely short interval.

Answer 2

jQuery sends AJAX Async by default. When trying to 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 3

The space is pretty simple.

You are using AJAX, which by definition is asynchronous. This means that you are executing $ .getJSON and js will continue to work and exit the critical section while processing the request. Therefore, several requests for getMessages can be executed before the completion of the first requests.

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

 $.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); }); });