暫停函數執行，直到另一個函數返回

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 模態，用戶必須在其中單擊“確定”、“取消”或關閉模態。 如果“好的”，則該值返回 true，否則返回 false。

我不想做回調，因為這會導致比預期更多的重構。 這有可能以另一種方式做到嗎？

謝謝！

Answer 1

這不可能。 您不能編寫阻止執行、收集用戶輸入並根據用戶輸入返回值的 JavaScript 函數。 阻止執行並等待用戶輸入的唯一方法是使用confirm 。

如果要使用自定義對話框，則必須重構代碼以使用回調。

請參閱模擬 Javascript '警報' 阻塞性質

Answer 2

您可以使用作為 ES7 一部分的 async/await 執行類似的操作。

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