javascript - 如何知道 JavaScript 中某个特定按钮何时被点击？

Question

我正在制作一个显示模态的函数，该模态有两个按钮。我希望此函数等待，直到单击两个按钮之一，然后返回与单击的按钮相对应的值。

这是我想出的示例代码:

function myFunc()
{
  var val=0;
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    val = 1;
  }
  buttonB.onclick = function(){
    //do something
    val = 2;
  }
  while(val == 0);
  return val;
}

此代码中的问题是页面由于无限循环而变得无响应，因此一旦初始化就无法更改 val 的值。

更准确地说，我希望主线程(在其上实现 myFunc)处于休眠状态，直到单击其他两个线程(分别是buttonA 和buttonB)之一。

还有其他解决方法吗？请仅用 Javascript 回答(无 jQuery)。谢谢。

Answer 1

尝试更多类似这样的事情:

function myFunc()
{
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    differentFunc(1)
  }
  buttonB.onclick = function(){
    //do something
    differentFunc(2)
  }
}

这是使该功能更加通用的另一种方式(根据您的评论进行编辑):

function myFunc(callback)
{
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    callback(1)
  }
  buttonB.onclick = function(){
    //do something
    callback(2)
  }
}

并称其为

myFunc(function(result) {
    // do stuff with result
    }

Javascript 本质上是单线程的。任何像这样无限等待的代码都会导致挂起并不允许输入。有多种方法可以编写异步函数，即像我在那里那样使用 Promises，但通常更容易使代码同步工作。