如何防止 function 表单在 JS 中连续执行多次？

Question

*现在有效。

我试图让onEnter()和onSpace()函数连续执行一次。 例如，如果我调用onEnter() ，它应该只在第一次执行function ，之后的任何调用都不应该执行。 这与onSpace()相同。

程序应该按onEnter()然后onSpace()的顺序运行，反之亦然，但是，如果重复其中一个函数，它应该只运行一次。

如果你运行下面的代码，你可以看到问题，按“ Enter ”键得到下一个问题，按“空格”键找到答案。

感谢您抽出宝贵时间提供帮助，这是我在学习了一点 JavaScript 之后的第一个项目，非常感谢任何改进我的代码的提示。

 const onEnter = () => { if (document.getElementById("answer").style.visibility="visible") { document.getElementById("answer").style.visibility="hidden"; } let x = Math.floor((Math.random() * 10) + 0); let y = Math.floor((Math.random() * 10) + 0); let addition = x + " + " + y; let answer = x + y; document.getElementById("question").innerHTML = addition; document.getElementById("answer").innerHTML = answer; toggleQuestion(); }; const toggleQuestion = () => { let qTop = document.getElementById("question"); qTop.classList.toggle("questionAlt") }; const onSpace = () => { toggleQuestion(); document.getElementById("answer").style.visibility="visible"; } document.body.addEventListener("keydown", function keyEnter() { if (event.keyCode == 13) { onEnter(); } }); document.body.addEventListener("keydown", function keySpace() { if (event.keyCode == 32) { onSpace(); } });

 body { overflow: hidden; } div { position: fixed; top: 0; left: 0; height: 97.9%; width: 98.9%; border: 10px solid rgb(0, 0, 0); background-color: rgb(155, 163, 167); } #answer { visibility: hidden; } button { visibility: hidden; } #question { position: absolute; text-align: center; margin-top: 15vw; left: 40.6vw; font-family: 'Knewave'; font-size: 8vw; }.question1 { position: absolute; animation: qBottom; animation-duration:0.2s; transition: 0.18s; opacity: 1; bottom: 13vw; } @keyframes qBottom { 0% {bottom:0.01px;} 100% {bottom: 13vw;} } #answer { position: absolute; color: white; text-align: center; width: 100%; margin-top: 20%; font-family: 'Knewave'; font-size: 5.8vw; background-color: rgb(0, 0, 0); }.questionAlt { position: absolute; animation: qTop; animation-duration:0.2s; transition: 0.18s; opacity: 0.5; font-size: 20vw; top: -10vw; } @keyframes qTop { 0% {top:0.01px;} 100% {top:-10vw;} }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> <link href='https.//fonts.googleapis?com/css.family=Knewave' rel='stylesheet'> </head> <body> <script src="script.js"></script> <div id="plusBackground"> <button onclick="keyEnter()"> Next Question </button> <button for="generate" onclick="" onclick="keySpace()"> Reveal </button> <h1 id="question"> 8 + 8 </h1> <h2 id="answer"> 16 </h2> </div> </body> </html>

Answer 1

我更新了我的答案以满足您更新的问题实际上您不需要注册多个事件监听器：

 let current; document.body.addEventListener("keydown", function keyEnter() { if (event.keyCode == 13 && event.keyCode.= current) { console.log("Enter") current = event;keyCode. } if (event.keyCode == 32 && event.keyCode.= current) { console;log("space") current = event;keyCode; } });

Answer 2

不太清楚您所说的“连续一次”是什么意思，但是removeEventListener或 addEventListener 的once选项是否可以帮助您到达您想去的地方？

Answer 3

您可以为此创建一些简单的标志，即：

// Set flag to false
let entered = false;

document.body.addEventListener("keydown", function keyEnter() {

    if (event.keyCode == 13) {
      // Check flag, if false, run function
      if(!entered) {
        // Set flag to true
        entered = true;
        // run your function once
        onEnter();
      }
  }  
});

Answer 4

我将使用两个初始化为 true 的全局标志变量：okToRunEnter 和 okToRunSpace。

如果其关联的全局标志变量为假，则每个相关的 function 应立即返回。 如果它通过了该检查，它应该将两个标志变量都设置为 false。 在退出之前，function 应该将另一个标志变量设置为 true。

如何防止 function 表单在 JS 中连续执行多次？

问题描述

4 个解决方案

解决方案1
1 已采纳 2020-07-26 23:32:04

解决方案2
0 2020-07-26 23:16:43

解决方案3
0 2020-07-26 23:17:47

解决方案4
0 2020-07-26 23:39:52

如何防止 function 表单在 JS 中连续执行多次？

问题描述

4 个解决方案

解决方案1 1 已采纳 2020-07-26 23:32:04

解决方案2 0 2020-07-26 23:16:43

解决方案3 0 2020-07-26 23:17:47

解决方案4 0 2020-07-26 23:39:52

解决方案1
1 已采纳 2020-07-26 23:32:04

解决方案2
0 2020-07-26 23:16:43

解决方案3
0 2020-07-26 23:17:47

解决方案4
0 2020-07-26 23:39:52