Question

我想替换Magento的alert（）和confirm（）对话框的实现。虽然alert（）替换是微不足道的，但我不确定如何处理confirm（）对话框。有没有办法阻止JavaScript继续，直到返回一个函数？这是否需要可能导致浏览器崩溃的循环？

例如，我需要替换这样的代码：

<form action="" method="POST">
   <input type="submit" onclick="return confirm('Are you sure?');" value="Delete">
</form>

...与

<form action="" method="POST">
   <input type="submit" onclick="return myCustomConfirm('Are you sure?');" value="Delete">
</form>

或其他方案，例如：

<script>
   var delete = confirm('Are you sure?');
   if (delete) {
       doSomething();
   }
</script>

...与

<script>
   var delete = myCustomConfirm('Are you sure?');
   if (delete) {
       doSomething();
   }
</script>

在这两种情况下，myCustomConfirm（）将打开一个Bootstrap模式，用户必须单击“Okay”，“Cancel”或关闭模态。如果“Okay”，则返回true，否则返回false。

我不想做回调，因为这会导致更多的重构而不是理想的。这有可能以另一种方式吗？

谢谢！

Answer 1

这是不可能的。您不能编写阻止执行的JavaScript函数，收集用户输入并根据用户输入返回值。阻止执行并等待用户输入的唯一方法是使用confirm。

如果要使用自定义对话框，则必须重构代码以使用回调。

请参阅Emulate Javascript 'alert' blocking nature

Answer 2

您可以使用ES7中的异步/等待来执行类似的操作。

async function stepTwo()
{
  return new Promise((resolve) =>
  {
    let stop = false;
    $('input[type=checkbox]').one('change', (event) =>
    {
      // Will only stop the loop when the checkbox is checked
      if (event.target.checked === true)
      {
        stop = true;
      }
    });
    loop();

    // Continues looping until stop is set to true (i.e. input has been done)
    function loop()
    {
      if (stop === true)
      {
        resolve();
        return;
      }

      // Keeps checking if stop is true
      setTimeout(loop, 100);
    }
  });
}

async function stepOne()
{
  $('div').text('Waiting for input..');
  // Waits for promise returned from stepTwo() to resolve
  await stepTwo();
  $('div').text('Input checked!');
}

// Starts the async function (any lines below this continue execution)
stepOne();

提琴：https://jsfiddle.net/1rvn5bfp/7/

Answer 3

只需让您的按钮打开Bootstrap模式并向Okay和Close按钮添加事件监听器

    <!-- Simple popup sample from Bootstrap.com: Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="hide_popup">Close</button>
        <button type="button" class="btn btn-primary" id="save_stuff">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS：

$("#save_stuff").on("click", function(){
    alert("This does something");
});

http://www.bootply.com/4Uflj4hKaL

暂停函数执行直到另一个函数返回

3 个答案: