pause function until enter key is pressed javascript

Question

new to javascript. i know this might be really simple but I can't figure it out. I want to execute a function. Pause in the middle of the function and wait for the user to hit “enter” key which will allow function to continue again (or will call another function to fire).

function appear()
{
document.getElementById("firstt").style.visibility="visible";
//here is where I want the pause to happen until the user presses "enter" key
//Below is what I want to happen after the "enter" key has been pressed.
document.getElementById("startrouter").style.visibility="visible";


}

Answer 1

UPDATE 2020

This can be easily achieved with Promises (ES2015) and async/await (ES2017).

1. Here we use async/await to pause execution and wait for the Promise being fulfilled:

   async function test() {
     console.log('waiting keypress..')
     await waitingKeypress();
     console.log('good job!')
   }
   

2. In the utility function we immediately return a Promise, however the await from the test function waits for resolve being called:

   function waitingKeypress() {
     return new Promise((resolve) => {
       document.addEventListener('keydown', onKeyHandler);
       function onKeyHandler(e) {
         if (e.keyCode === 13) {
           document.removeEventListener('keydown', onKeyHandler);
           resolve();
         }
       }
     });
   }
   

Here is a fiddle

BONUS ROUND

With the pattern of awaiting a Promise we can also write a function which waits x seconds and then continues execution:

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

This waits for 1 second:

async function test() {
   await delay(1000);
   // Goes on after 1 second
}

MDN await

The await expression causes async function execution to pause until a Promise is settled, and to resume execution of the async function after fulfilment.

MDN Promise

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.

Answer 2

I would create a global variable to see if the javascript is waiting for a key press.

At the top of your script you can add

var waitingForEnter = false;

Then set it to true in your function

function appear()
{
     document.getElementById("firstt").style.visibility="visible";
     waitingForEnter = true;
}

Then...add a listener for the enter key

function keydownHandler(e) {

    if (e.keyCode == 13 && waitingForEnter) {  // 13 is the enter key
        document.getElementById("startrouter").style.visibility="visible";
        waitingForEnter = false; // reset variable
    }
}

// register your handler method for the keydown event
if (document.addEventListener) {
    document.addEventListener('keydown', keydownHandler, false);
}
else if (document.attachEvent) {
    document.attachEvent('onkeydown', keydownHandler);
}

I hope this helps. This is just what I would do, it might not be the best approach.

Answer 3

or we can inline the solution from Javalsu, and get rid of the global variable.

function appear(){
    document.getElementById("firstt").style.visibility="visible";
    //here is where I want the pause to happen until the user presses "enter" key
    function after(){
        //Below is what I want to happen after the "enter" key has been pressed.
        document.getElementById("startrouter").style.visibility="visible";
    }
    function keydownHandler(e) {
        if (e.keyCode == 13 && waitingForEnter) {  // 13 is the enter key
            after();
        }
    }
    // register your handler method for the keydown event
    if (document.addEventListener) {
        document.addEventListener('keydown', keydownHandler, false);
    }
    else if (document.attachEvent) {
        document.attachEvent('onkeydown', keydownHandler);
    }
}