Triona Weblog

Jeder kennt die Situation: Man entwickelt in Javascript, registriert u.a. viele Events etc. oder man arbeitet an einem bestehenden Projekt und muss das bestehenhe Javascript anpassen. Wie behält man in beiden Fällen den Überblick über die Events auf einer Seite?

Ein Tool das ich im Rahmen einer Arbeit bei einem Kunden kennengelernt habe ist “visual event”. Dieses Tool ist ein sogenanntes Bookmarklet.

Wie funktioniert es und was macht es? Man fügt per Drag’n'Drop von der Seite http://www.sprymedia.co.uk/article/Visual+Event den Button “Visual Event” in die Bookmarkleiste des Browsers.

Danach geht man auf eine beliebige Seite deren Events man untersuchen möchte. Ist die Seite geöffnet, klick man auf das zuvor hinzugefügte Bookmark. Nach kurzer Zeit wird die Seite abgedunkelt und es erscheinen kleine, farbige Kästchen die über die Art des Events (Maus: Klick, Doppelklick, Mouseover; HTML – Events: select, blur, focus sowie UI Events: Key down, Key up etc.).

Fährt man mit der Maus über die Kästchen, erhält man Informationen wo im Skript diese Event behandelt wird.

Sehr hilfreich, wenn man den Überblick verliert, wer was wann wieso wo macht!

What is a race condition? A race condition is a flaw in a system or process whereby the output and/or result of the process is unexpectedly and critically dependent on the sequence or timing of other events. (Wikipedia on Race Conditions.).

So far, so good.

How does race conditions appear using Ajax?
It happens when two or more operations are started, and the result of these operations needs to be displayed AFTER all operations has been finished.

For example: You want to display the different types of information like price, weight, dimensions of a car. For each of these information, you use an Ajax operation (It is no question, that this problem can be also solved in other ways). Now…you want that these information are displayed AFTER all figures has been determined.

But where is the problem? Have a look at the following code:

function determineFigure()
{
   var serialNo = "XK8LBV42".
   getPrice(serialNo);
   getLength(serialNo);
   getWidth(serialNo);
   getHeight(serialNo);
   displayFigures();
}

function getPrice(serialNo)
{
  ... Ajax Operation ...
}

function getLength(serialNo)
{
  ... Ajax Operation ...
}

function getWidth(serialNo)
{
  ... Ajax Operation ...
}

function getWeight(serialNo)
{
   ... Ajax Operation ...
}

function displayFigures()
{
   ... Display operation
}

The problem is that the “displayFigures()” will be called before all the figures has been determined. How come? Each Ajax request has to be transmitted, processed
and the result has to be sent back to the client. This all takes time; and definitely more time to invoke the methods mentioned above!than invoking the four methods.

So how can we solve this problem? I would like to introduce here two options: “Chaining” and “Counting”

Option 1: Chaining

Each Ajax request has a so called “Callback Method”. See code below!

function getPrice(serialNo)
{
    $.ajax(
              {
                type: "POST", // Set the Post Method
                url: "/keyFigureController.php, // Set the target url
                data: "serialNo=" + serialNo + "&type=price", // set the parameters
                success: function(msg)
                {
                  getLength(serialNo);
                },
                error: function(msg)
                {
                }
   });
}

These methods are called in case of an successful (“success”) or errorneous (“error”) outcome of the request. So, what you can do here, is to write in each success method the next method until every figure is determined and the information can be displayed.

Option 2: Counting

Another way is to count the number of completed requests.

function getPrice(serialNo)
{
    incrementTotalRequestCounter();

    $.ajax(
             {
               type: "POST", // Set the Post Method
               url: "/keyFigureController.php, // Set the target url
               data: "serialNo=" + serialNo + "&type=price", // set the parameters
               success: function(msg)
               {
                  incrementProcessedRequestCounters();
                  addNumberToTable();
                  checkCounter();
              },
              error: function(msg)
             {
             }
           }
      );
}

function checkCounter()
{
   incrementProcessedCounter();
   if(getTotalRequestCounter == getProcessedCounter())
  {
    showDialog();
  }
}