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自然是单线程的。任何等待无限的代码都会导致挂起并禁止输入。有一些方法可以编写异步函数，就像我在那里使用Promise一样，但通常更容易使代码同步工作。

Answer 2

如果我理解OP的目的是创建一个包含confirm()等2个选项的模态？但由于某种原因，confirm()不合适？那么每个按钮上的值是否等待用户交互？除非我遗漏了一些相当重要的东西，否则我已经制作了一个动态生成的模态（没有手动标记），它有2个按钮。目的和结果让我不知所以我留下了一个事件监听器和一个具有简单三元条件的函数，警报可以由OP自行决定用适当的语句或表达式代替。

段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background:transparent;
    }
    .ui {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: table-cell;
      border: 3px ridge grey;
      border-radius: 6px;
    }
    button {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <script>
    var frag = document.createDocumentFragment();
    var modal = document.createElement('div');
    var ui = document.createElement('div');
    var on = document.createElement('button');
    var off = document.createElement('button');
    modal.className = 'modal';
    ui.className = 'ui';
    on.id = 'on';
    on.textContent = 'On';
    off.id = 'off';
    off.textContent = 'Off';
    frag.appendChild(modal);
    modal.appendChild(ui);
    ui.appendChild(on);
    ui.appendChild(off);
    ui.addEventListener('click', status, false);

    function status(e) {
      var tgt = e.target.id;
      tgt === 'on' ? alert('ON!') : alert('OFF!');
    }
    document.body.appendChild(frag);
  </script>
</body>

</html>

如何知道在Javascript中点击某个特定按钮的时间？

2 个答案:

段