How to add a callback to a function in javascript that is called two times in a row with different parameters?

Question

I have a function that is called twice with different parameters:

function setArray(chartType, charData, nodeName, meaQuantityId, unitName) {
  var legendText = nodeName + '(' + unitName + ')';
  var lineData = null;
  var scatterData = null;
  if (chartType != null) {
    switch (chartType) {
      case 'line':
        {
          if (compareGraphData.length > 0) {
            for (var i = 0; i < compareGraphData.length; i++) {
              if (legendText == compareGraphData[i].legendText) {
                legendText = changeLegendText(legendText, i);
              }
            }
          }
          lineData = {
            type: chartType, //try changing to column, area
            showInLegend: true,
            legendText: legendText,
            toolTipContent: "{label}LS : {y} ",
            dataPoints: charData
          };
          compareGraphData.push(lineData);
          break;
        }
      case 'scatter':
        {
          if (compareScatterGraphData.length > 0) {
            for (var i = 0; i < compareScatterGraphData.length; i++) {
              if (legendText == compareScatterGraphData[i].legendText) {
                //legendText = changeLegendText(legendText, i);
              }
            }
          }
          scatterData = {
            type: chartType, //try changing to column, area
            showInLegend: true,
            legendText: legendText,
            toolTipContent: "{label}LS : {y} ",
            dataPoints: charData
          };
          compareScatterGraphData.push(scatterData);
          break;
        }
    }
  } else {
    var arr = [];
    for (var i = 0; i < charData.length; i++) {
      arr.push({
        'quantityName': charData[0].nodeName,
        'data': charData[i].value,
        'count': charData[0].count,
        'unitName': charData[0].xUnitName,
        'meaQuantityId': meaQuantIdForDataTable
      });
    }
    dataView.push(arr);
  }
}

function changeLegendText(legendText, i) {
  var value = webix.ui({
    view: "window",
    modal: true,
    id: 'id-win-change-channel-Name',
    fullscreen: true,
    position: function(state) {
      state.width = 220;
      state.top = 200;
      state.left = (window.innerWidth - state.width) / 2;
      state.height = 150;
    },

    head: "Change Alias!",
    body: {
      padding: 10,
      rows: [{
        view: 'text',
        id: "id-text-change-channel-Name",
        value: legendText + '_' + i
      }, {
        view: 'button',
        value: "OK",
        click: function() {
          channelAliasValue = $$('id-text-change-channel-Name').getValue();

          $$('id-win-change-channel-Name').hide();
        }
      }]
    }
  }).show();
}

////I call the function like this:

DBService.getGraphData('getGraphData')
    .then(function(response){
    var charData=response.result;
    setArray('line', charData, nodeName, meaQuantityId, unitName);
    setArray('line', charData, nodeName, meaQuantityId, unitName);
});

I have compared legendText with the one in the compareGraphData array. If it is true then a popup comes up with a text box and a button.

I want to stop the execution when the popup comes up and continue the execution after the user clicks on the button.

But the above code doesn't wait for the user event and continue with the next statement.

Can you tell me the best possible way to achieve this?

Answer 1

You can pass a function to your function like this:

function setArray(chartType, data, cb){
 cb("hello")
} 

setArray('scatter', data, function(x){
 console.log(x) // hello
});

Double

function setArray(chartType, data, cb){
 cb(data)
} 

setArray('scatter', "Hello ", function(x){
 setArray('scatter', "World!", function(y){
    console.log(x + y)// Hello world!
 })
});

or use async

Answer 2

In case of asynchronous execution (which is not clear with the missing setArray function body), this can be resolved with a promises. Reference here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

let setArray = function setArray('line', data) {
  return new Promise((resolve, reject) => {
    // logic for function setArray here
  });
};

let call1 = setArray('line', data).then(function(result) {
  // do stuff with result
});

let call2 = setArray('scatter', data).then(function(result) {
   // do stuff with result
});

However, if the function body of setArray has no asynchronous parts, the regular function call can be executed without problems. If it does not work, there is likely another problem with the code.

Answer 3

I think what you want is to only use the last change.

For example the user has a list of all animals and can choose to show only slow or fast animals but the filter is asynchronous.

User clicks to show only slow animals and it'll take 1 second for the filter to return data. Within this one second user chooses to show all animals so the user interface is set on showing all animals. Showing all takes 100 milliseconds, returns and updates the list to show all. Then the slow animals list comes in and list is showing only slow animals.

Now the user interface and the list presented are out of sync. This problem is described here.

A solution to this problem I implemented was to pass a promise to a function that will only resolve the promise if it was the last created promise (most recent user action).

How to convert a function that uses callbacks to a function that returns a promise can be found here (under: Converting callback to promise.)

[UPDATE]

As stated yesterday; I think the user changes something and then changes something else so 2 promises are getting data that do not resolve at the same time the user created them and/or are both resolving so your application is doing something that is no longer needed.

The answer I gave yesterday can be applied to your code in the following way using onlyLastPromise from lib:

const onlyLastRequestedPromise = ((promiseIds) => {
  const whenResolve = (promise, id, promiseID, resolveValue) => {
    if(promise!==undefined){//called by user adding a promise
      promiseIds[id]={};
    } else {//called because promise is resolved
      return (promiseID === promiseIds[id])
        ? Promise.resolve(resolveValue)
        : Promise.reject("A newer request was made.")
    }
    return (function (currentPromiseID) {
      return promise
        .then(function (result) {
          return whenResolve(undefined,id, currentPromiseID, result);
        });
    }(promiseIds[id]));
  };
  return (id = "general") => promise =>
    whenResolve(promise, id);
})({});
//this is for your fetching your data, add it to your service
const lastForChart=onlyLastRequestedPromise("CHART_DATA");

//wrap your getGraphData in a "only last"
lastForChart(DBService.getGraphData('getGraphData'))
.then(
  function(response){
    var charData=response.result;
    setArray('line', charData, nodeName, meaQuantityId, unitName);
    setArray('line', charData, nodeName, meaQuantityId, unitName);
})
.catch(
  err=>
    (err==="A newer request was made.")
      ? "replaced by newer request"
      : Promise.reject(err)
);