how to call javascript methods sequentially on onclick event

Question

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

Answer 1

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
         } 
      } 

Answer 2

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);