暂停功能直到输入键被按下javascript

Question

新手到javascript.我知道这可能很简单,但我无法理解.我想执行一个函数.在函数中间暂停并等待用户点击"enter"键,这将允许函数再次继续(或将调用另一个函数来触发).

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

2020 年更新

这可以通过Promises (ES2015)和async/await (ES2017)轻松实现。

1. 这里我们使用 async/await 来暂停执行并等待 Promise 完成：

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

2. 在实用函数中，我们立即返回一个 Promise，但是测试函数中的await等待解析被调用：

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

这是一个小提琴

奖金回合

使用等待 Promise 的模式，我们还可以编写一个等待 x 秒然后继续执行的函数：

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

这等待 1 秒钟：

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

MDN 等待

await 表达式导致异步函数执行暂停，直到 Promise 被解决，并在完成后恢复异步函数的执行。

MDN 承诺

Promise 是在创建 Promise 时不一定知道的值的代理。它允许您将处理程序与异步操作的最终成功值或失败原因相关联。

Answer 2

我将创建一个全局变量来查看 JavaScript 是否正在等待按键。

在脚本的顶部，您可以添加

var waitingForEnter = false;

然后在你的函数中将其设置为 true

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

然后...添加一个回车键的监听器

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

我希望这有帮助。这正是我会做的，这可能不是最好的方法。