当前位置：文江博客话题详情

如何让程序等待 JavaScript 中的按钮按下？

发布于 2024-08-20 19:53:15 字数 100 浏览 6 评论 0原文

我需要修改一些遗留的 JavaScript 代码。有一个地方我想等到用户按下两个按钮之一，然后继续程序流程（如 prompt() 函数）。如何才能实现这一目标？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陪你搞怪i 2024-08-27 19:53:15

只需创建一个承诺并将解析函数存储在其范围之外的全局变量中。然后让程序等待承诺解决（使用“async”和“await”）。通过调用该全局变量，单击按钮即可解决该承诺。我在国际象棋程序中使用了这种技术来等待升级弹出窗口的答案：

var _promote; /* resolve-function reference */

async function promote_piece(pce, fld, clr) {
  var type;
  (...)
  show_mpw(clr); /* show modal promotion window */
  var promise = new Promise((resolve) => { _promote = resolve });
  await promise.then((result) => { type = result });
  if (type === undefined) type = "Q";
  (...)
}

因此在创建承诺后，程序将等待直到弹出窗口解决它。弹出窗口在关闭时按如下方式解析承诺：

_promote(type); /* resolve promotion-promise */

注意：请记住，在这种情况下，promote_piece() 函数本身也必须使用“await”关键字来调用！否则程序将异步执行并无论如何继续

Simply create a promise and store the resolve function outside its scope in a global variable. Then let the program wait for the promise to resolve (using "async" and "await"). The promise is resolved on a button click by calling that global variable. I used this technique in a chess program to wait for the answer to a promotion popup window:

var _promote; /* resolve-function reference */

async function promote_piece(pce, fld, clr) {
  var type;
  (...)
  show_mpw(clr); /* show modal promotion window */
  var promise = new Promise((resolve) => { _promote = resolve });
  await promise.then((result) => { type = result });
  if (type === undefined) type = "Q";
  (...)
}

So after creating the promise, the program will wait until the popup window resolves it. The popup window resolves the promise as follows when it is closed:

_promote(type); /* resolve promotion-promise */

N.B. Please keep in mind that in this case the promote_piece() function itself also has to be called with the "await" keyword! Otherwise the program will execute it asynchronously and continue anyhow

回复收藏 0 原文

等数载，海棠开 2024-08-27 19:53:15

您需要在此时中断您的函数，并添加另一个函数来捕获用户的按钮按下事件。

您可以使用 Narrative Javascript 引入阻塞行为并简化它（这样您就不需要破坏将你的函数分成两部分），但请注意，该库自 2013 年以来已被废弃。

回复收藏 0 原文

離人涙 2024-08-27 19:53:15

好吧，也许你想要这种东西，你可以实现事件来标记 Pentium10 答案中的关键：

你可以创建一个名为 waitForIt() 的函数，在其中设置一个 setTimeout() 函数，该函数调用相同的方法，直到全局变量为 true（通过按下按钮操作设置）。

例如：

<html>
<head>
 <script type="text/javascript">
var buttonpressed = false;

function waitForIt() {
  if (!buttonpressed ) {
  setTimeout(waitForIt,2500);
  } else {
 document.getElementById('info').value='ok';
  }
}

function startSomething() {
 document.getElementById('info').value='';
 waitForIt();
 document.getElementById('info').value='waiting'; 
}

function setButtonPressed() {
 buttonpressed = true;
}

</script>
</head>
<body>
<br>
<input type='text' style="width: 200px;" id="info" />
<br>
<input type='button' style="width: 200px;" value="Start" onclick="javascript: startSomething();">
<br>
<br>
<input type='button' style="width: 200px;" value="Continue" onclick="javascript: setButtonPressed();">
</body>

</html>

您可以直接调用 waitForIt() 方法，但我这样做是为了让您可以查看正在发生的情况。
抱歉示例中的混乱，但我没有太多空闲时间:)

Ok, probably you wanted this kind of thing, you can implement the events to flag the key from Pentium10's answer:

You can make a function called for example waitForIt() in which you set a setTimeout() function that calls the same method until a global variable is true (set by you press button action).

For example:

<html>
<head>
 <script type="text/javascript">
var buttonpressed = false;

function waitForIt() {
  if (!buttonpressed ) {
  setTimeout(waitForIt,2500);
  } else {
 document.getElementById('info').value='ok';
  }
}

function startSomething() {
 document.getElementById('info').value='';
 waitForIt();
 document.getElementById('info').value='waiting'; 
}

function setButtonPressed() {
 buttonpressed = true;
}

</script>
</head>
<body>
<br>
<input type='text' style="width: 200px;" id="info" />
<br>
<input type='button' style="width: 200px;" value="Start" onclick="javascript: startSomething();">
<br>
<br>
<input type='button' style="width: 200px;" value="Continue" onclick="javascript: setButtonPressed();">
</body>

</html>

You could call the waitForIt() method directly but i made it so you can view what is happening.
Sorry for the mess in the example but i don't have much time to spare :)

回复收藏 0 原文

另类 2024-08-27 19:53:15

您可以隐藏可能不可见的内容（使用 CSS display:none）并在按下按钮时显示它。
或者更安全：您可以在按下按钮时执行服务器/AJAX 请求

回复收藏 0 原文

罪歌 2024-08-27 19:53:15

JavaScript 中没有“睡眠”或“等待”运算符。不过，您可以设置一个计时器，当计时器到期时，它将执行一个函数。

setTimeout("alert('hello')",1250);

您必须使用事件来标记密钥：

<script type="text/javascript">

document.onkeyup = KeyCheck;       
function KeyCheck()

{

   var KeyID = event.keyCode;


   switch(KeyID)

   {

      case 16:

      document.Form1.KeyName.value = "Shift";

      break; 

      case 17:

      document.Form1.KeyName.value = "Ctrl";

      break;

      case 18:

      document.Form1.KeyName.value = "Alt";

      break;

      case 19:

      document.Form1.KeyName.value = "Pause";

      break;

      case 37:

      document.Form1.KeyName.value = "Arrow Left";

      break;

      case 38:

      document.Form1.KeyName.value = "Arrow Up";

      break;

      case 39:

      document.Form1.KeyName.value = "Arrow Right";

      break;

      case 40:

      document.Form1.KeyName.value = "Arrow Down";

      break;
   }

}
</script>

There is no "sleep" or "wait" operator in JavaScript. You can set a timer, though, and when the timer expires, it will execute a function.

setTimeout("alert('hello')",1250);

You have to use the events to flag the key:

<script type="text/javascript">

document.onkeyup = KeyCheck;       
function KeyCheck()

{

   var KeyID = event.keyCode;


   switch(KeyID)

   {

      case 16:

      document.Form1.KeyName.value = "Shift";

      break; 

      case 17:

      document.Form1.KeyName.value = "Ctrl";

      break;

      case 18:

      document.Form1.KeyName.value = "Alt";

      break;

      case 19:

      document.Form1.KeyName.value = "Pause";

      break;

      case 37:

      document.Form1.KeyName.value = "Arrow Left";

      break;

      case 38:

      document.Form1.KeyName.value = "Arrow Up";

      break;

      case 39:

      document.Form1.KeyName.value = "Arrow Right";

      break;

      case 40:

      document.Form1.KeyName.value = "Arrow Down";

      break;
   }

}
</script>

回复收藏 0 原文