Sync execution in javascript

Question

Here is the problem: there are 2 functions

    function first(){
        var char = getChar();
    
        //Some code
    }
    function getChar(){
        var e = function(event){
            if(event.code != "Enter"){
                document.removeEventListener("keydown", e, false);
                return event.code;
            }
        }
        document.addEventListener("keydown", e, false);
    }
    first();

I need to get the result from getChar() and continue execution of first(). How can i do that? Please leave some sample code.

Welcome to SO! Can you put `first()` call inside of `getChar`? `return event.char` probably isn't going to do what you think it will though. The behavior you want isn't terribly clear to me. — ggorlen, Jul 24 '20 at 13:32
Same thing--from [the docs](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback), "the callback accepts a single parameter: an object based on Event describing the event that has occurred, and it returns nothing.". It seems like you're trying to expose `event.code` (whatever that is, I don't think that property exists either) but returning it from the callback won't achieve this. — ggorlen, Jul 24 '20 at 13:43
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — pppery, Jul 24 '20 at 15:24

score 0 · Answer 1 · answered Jul 24 '20 at 13:44

In this case you can continue directly in the event handler method. Once you get the input you needed execute the other functions.

    function first(){   
        //Some code
    }

    function getChar(){
        var e = function(event){
            if(event.code != "Enter"){
                document.removeEventListener("keydown", e, false);
                first();
            }
        }
        document.addEventListener("keydown", e, false);
    }

    getChar();

score 0 · Answer 2 · answered Jul 24 '20 at 13:46

You should use the separate function to handle the event's result. Here is an example:

function char_handler(char){
    //some code
}


function first(callback){
        getChar(callback);
}
    
    
function getChar(callback){
    var e = function(event){
        if(event.code != "Enter"){
            document.removeEventListener("keydown", e, false);
            callback(event.code);
        }
    }
    document.addEventListener("keydown", e, false);
}

first(char_handler);

score 0 · Accepted Answer · answered Jul 24 '20 at 14:02

Here's how that works:

async function first() {
  try{
    var char = await getChar();

    console.log(char);

    alert("Goes on");
  }
  catch(e){
    alert(e);
  }
}

function getChar() {
  return new Promise((resolve, reject) => {
    var e = function(event) {
      if (event.key != "Enter") {
        resolve(event.key);
      } else
        reject('Enter pressed');
    }

    document.addEventListener("keydown", e, {
      once: true,
      capture: false
    });
  });
}

first();

Thanks everyone for help.

Sync execution in javascript

3 Answers3