I need to call two functions sequentially (means one by one) in javascript on onclick event.

The requirement is to get the data from the backend and then make the cell highlight. Below code snippet is used for this:

cell1.onclick=function() {
    getData("FileName");
    setTimeout("setHighlight('FileName')", 500);
};

Currently i am using the setTimeout for calling the second method after a delay of 500ms.

The problem with above code is if getData method takes more than 500ms to get the data from backend then in that case cell would not get highlighted.

Is there any way to do this?

Thanks Jyoti

I need to call two functions sequentially (means one by one) in javascript on onclick event.

The requirement is to get the data from the backend and then make the cell highlight. Below code snippet is used for this:

cell1.onclick=function() {
    getData("FileName");
    setTimeout("setHighlight('FileName')", 500);
};

Currently i am using the setTimeout for calling the second method after a delay of 500ms.

The problem with above code is if getData method takes more than 500ms to get the data from backend then in that case cell would not get highlighted.

Is there any way to do this?

Thanks Jyoti

• javascript
• html

Share Improve this question Follow edited Oct 20, 2010 at 10:19 Alberto Zaccagni 31.6k1111 gold badges7575 silver badges107107 bronze badges asked Oct 20, 2010 at 10:16 JyotiJyoti 2,11533 gold badges2727 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

To get data from the backend, you probably are using AJAX.

And in the callback function you are populating the data. After this step, call the highlight function.

You probably have something like this:

      xmlHttp.onreadystatechange = function() 
      { 
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
         { 
            // do something with the response here
            highlightData();  //<---- the function to highlight data
         } 
      } 

You should add another parameter to getData, which is a function to execute when you have the data. So,

function getData(filename, callback) {
  // get the data
  // when you have the data, do callback(filename);
}

then you can do

getData("FileName", setHighlight);