Javascript: when anonymous functions can help with asynchronous events

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Filament.io 0 Flares ×

SCENERY:

  • your web page with some asynchronous javascript functions developed in the past
  • a new feature you are developing now only affecting one page that needs to be triggered when an old asynchronous function returns a deferred object.

Usually you would modify your old general functions to insert a trigger to the new one. But you can do it better! Let me explain how you can modify your website’s javascript just by adding 2 useful lines that doesn’t affect any other page than the one we want to change.

 

SOLUTION:

Let’s set a new variable at the very top of your common javascript code assigning to it an empty function:

// 
// This should be set just after <script type="text/javascript"> or in some upper position of your scripts.
var myUsefulFunction = function(resultObject){};
// 

This variable does nothing in every page of the website except in the one you want it does. So, in this page you can add this javascript that simply redeclare the previous common empty function:

// 
var myUsefulFunction = function(resultObject){
// Do something with the resultObject or whatever
alert(resultObject); //for example!
};
// 

Now you are ready to add a simple code line to your ajax code. For example, using a Jquery.get object:

Javascript:

// 
// JQuery.get() function that gets an ajax call and manage the result
$.get('example.com/server.php',{somevar: 'some value',othervar: 'other value'},function(resultObject){
// this is where you manage your deferred server answer
myUsefulFunction(resultObject);
// Do anything you want...

});
// 

 

EXAMPLE

 

This is the JS on every page of your website that is not using the function:

// 
// this is the empty function that we will use in other pages
var myUsefulFunction = function(resultObject){};

/*
some scripts...
*/

// Your ajax function... I just added a calling to myUsefulFunction that in most of the cases it will do nothing.
$.get(&quot;example.com/server.php&quot;,{somevar: 'some value',othervar: 'other value'},function(resultObject){
// putting this line in your ajax function will not affect this page because myUsefulFunction is empty
myUsefulFunction(resultObject);
// do anything you want...
});
// 

 

You can see that I only introduced the empty function at the top of your scripts and call it back inside the ajax return managing.

 

The following javascript example shows what you can do in the page you want to manage the ajax function with “myUsefulFunction”. I just redeclare this variable somewhere after the common script with an anonymous function that is not empty. This will be the deferred function you wanted:

// 
// This is the common JS
var myUsefulFunction = function(resultObject){};

/*
some scripts...
*/

// here starts the specific JS for this page:

var myUsefulFunction = function(resultObject){
// you can see that we redeclared myUsefulFunction and inside its anonymous function
// I do something that can manage the result sent from the deferred ajax
alert(resultObject);
};
 
/*
some scripts...
*/
 
// Your ajax function. This part is not changed: myUsefulFunction is called as in the other pages,
// but only in this page we changed the value with a not empty function, as you have seen above

$.get(&quot;example.com/server.php&quot;, {somevar: 'some value',othervar: 'other value'}, function(resultObject){ 
myUsefulFunction(resultObject); 
// Do anything you want...
});
// 

Powerful! And you couldn’t do it without run-time and anonymous functions. With simply declared functions you would get many problems.
I personally used this solution for some features I implemented in www.rds.it

 

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Filament.io 0 Flares ×