JS 等待自定义 UI

Question

这段代码重载了 js alert

<div id="alert" class="modal fade" data-backdrop="static" data-keyboard="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 id="alert-title" class="modal-title">ALERT!</h4>
      </div>
      <div class="modal-body">
        <p id="alert-text">One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

window.alert = function () {
  $("#alert-text").html(arguments[0]);
  if (arguments.length > 1)
    $("#alert-title").html(arguments[1]);
}

但行为是错误的；警报不再阻塞。所以它变成了这个

var wait = {};
function waitFor(id){
  if ($("#" + id).attr("aria-hidden") == true)
    wait[id] = false;
  else
    setTimeout(waitFor,300,id);
};

window.alert = function () {
  $("#alert-text").html(arguments[0]);
  if (arguments.length > 1)
    $("#alert-title").text(arguments[1]);
  wait.alert = false;
  setTimeout(function () {
    $("#alert").modal();
    waitFor("alert");
  }, 300);
  while (wait.alert) {
    //do nothing
  }
}

现在它暂停了，但是停止 UI 线程是一个令人沮丧的想法，因为它会干扰渲染。

我可以将警告变成承诺，但这不向后兼容。

是否可以创建一个 drop in replacement for alert，或者我应该放弃并修改每个 alert 调用？

每个接受的答案下面的代码变成

  <div id="alert" class="modal fade" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" 
            aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 id="alert-title" class="modal-title">Message from application</h4>
        </div>
        <div class="modal-body">
          <p id="alert-text">One fine body&hellip;</p>
        </div>
        <div class="modal-footer">
          <button id="alert-close" type="button" class="btn btn-primary" 
            data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

alert = function () {
  $("#alert-text").html(arguments[0]);
  if (arguments.length > 1) {
    $("#alert-title").html(arguments[1]);
  }
  var deferred = $.Deferred();
  $("#alert-close").one("click", function () {
    deferred.resolve("resolve");
  });
  $("#alert").modal();
  return deferred;
}

你会这样称呼它

alert("This is the text for the <b>alert</b> containing markup", 
  "This is a custom title").done(function () {
  $(document.body).append("<p>This runs AFTER the alert closes<p>");
});
$(document.body).append("<p>This runs BEFORE the alert closes");

Answer 1

无法创建具有完全相同的接口和阻止功能的 alert() 的完整、直接替代品，因为无法模拟 alert() 具有的阻止功能你自己的 Javascript.

您必须使用非阻塞例程，因此必须更改接口，以便调用者可以知道警报何时完成并继续处理（就像您建议的 Promises）。

JS 等待自定义 UI

JS wait for custom UI

javascript

twitter-bootstrap-3