javascript - How to merge/call the results of 2 callback function into a new function javascript?

Question

What I currently have is 2 functions with callbacks.

At the end of validateEvent, there will be 2 variables isDeactivated and eventOrganizer.

While at the end of validateCheckIn, there will be 1 variable which is isCheckIn.

What I want to achieve now is merging the results of the 2 functions validateEvent and validateCheckIn into 1 new function where I can interact with 3 of the variables isDeactivated, eventOrganizer and isCheckIn in it.

What I've found so far is something like this: link

But what if I wanted to add extra code in the newly merged function?

var isDeactivated = false;
var eventOrganizer;
var isCheckIn = false;

             function validateEvent(result) {
                $.post(
                    "**displayEventAPI**", 
                    { 
                        id: eventID,
                    }).done(function (data) {
                        result(
                            data["eventList"][0]["event_status"], 
                            data["eventList"][0]["event_creator"]
                        );
                    }
                )
            }

            validateEvent(function(event_status, event_creator) {
                if (event_status == 0) {
                    isDeactivated = true;
                }

                eventOrganizer = event_creator;

                console.log(isDeactivated, '--isDeactivated');
                console.log(eventOrganizer, '--eventOrganizer');
            });

            function validateCheckIn(result) {
                $.post(
                    "**displayAttendanceAPI", 
                    { 
                        event_id: eventID,
                    }).done(function (data) {
                        for (var i = 0; i < data.attendanceList.length; i++) {
                            if (data.attendanceList[i].badge_id === badgeID) {
                                isCheckIn = true;
                            }
                        }
                        result(
                            isCheckIn
                        );
                    }
                )
            }

            validateCheckIn(function(isCheckIn) {
                console.log(isCheckIn, '--isCheckIn');
            });

标签： javascript

Answer 1

Try using Promise and async functions for the implementation.

Also wrap your async function calling inside an another async function. Because await keyword can only be used inside an async function.

var isDeactivated = false;
var eventOrganizer;
var isCheckIn = false;

async function validateEvent() {
  return new Promise((resolve, reject) => {
    $.post(
      "**displayEventAPI**",
      {
        id: eventID,
      }).done(function (data) {
        resolve({
          event_status: data["eventList"][0]["event_status"],
          event_creator: data["eventList"][0]["event_creator"]
        });
      }
      )
  })
}

async function validateCheckIn(result) {
  return new Promise((resolve, reject) => {
    $.post("**displayAttendanceAPI", {
        event_id: eventID,
      }).done(function (data) {
        for (var i = 0; i < data.attendanceList.length; i++) {
          if (data.attendanceList[i].badge_id === badgeID) {
            isCheckIn = true;
          }
        }
        resolve(isCheckIn);
      })
  })
}

function thirdFunction(event_status, event_creator, isCheckIn) {
  console.log(event_status, '--isCheckIn');
  console.log(event_creator, '--isCheckIn');
  console.log(isCheckIn, '--isCheckIn');
}

async function execute() {
  const { event_status, event_creator } = await validateEvent();
  const isCheckIn = await validateCheckIn();
  thirdFunction(event_status, event_creator, isCheckIn);
}

execute();