暂停函数，直到按下回车键

pause function until enter key is pressed javascript

本文关键字：回车 函数 暂停      更新时间：2023-09-26

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";

}

UPDATE 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等待resolve被调用:

    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


<

奖金轮/strong>

按照等待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表达式导致async函数暂停执行，直到Promise完成，并在Promise完成后继续执行async函数。

MDN承诺

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

我将创建一个全局变量来查看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);
}

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

或者我们可以内联Javalsu的解决方案，并去掉全局变量。

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);
    }
}
相关文章：