javascript - 使用alertify.js 进行递归会导致自动关闭警报

Question

我正在尝试将以下旧式代码片段转换为 alertify.js 0.3.8:

window.doPrompt = function() {
  var str;
  do str = prompt("Enter your name");
  while (str === "" && (alert("Can't be empty!") || true));
  if (str) document.getElementsByTagName("body")[0].innerHTML += ("<pre>Your name is: " + str + "</pre>");
}

JSFiddle of the above

这是我第一次尝试:

window.doPrompt = function() {
  alertify.prompt(
    "Enter your name", 
    function(confirmed, str) { 
      if (confirmed) { 
        if (str.length === 0) {
          alertify.alert(
            "Can't be empty!", 
            function() { doPrompt(); }
          ); 
        } else {
          document.getElementsByTagName("body")[0].innerHTML += ("<pre>Your name is: " + str + "</pre>");
        }
      }
    }
  );
}

JSFiddle of the above

它没有按预期工作。例如，在 Firefox 19 中，如果您使用键盘提交空提示，“错误”警报只会显示很短的时间，然后会自行消失，这与以前的工作方式不同。

我尝试通过在每个alertify调用周围插入对window.setTimeout的调用来打破递归，并将超时设置为0。这没有帮助。

如果您可以向我推荐一个具有类似 API 的替代 JavaScript 库，我可以使用它(当然不会有这个问题)，那就没问题了。

Answer 1

这似乎不是 alertify.js 的问题，而是 Firefox 的问题。如果您搜索bugs related to transitionend (根据 the sources 在对话框动画中使用)您将看到您遇到的问题的一些潜在候选者(特别是 "transitionend event not fired when there are multiple transitions" )。这与您所经历的情况一致 - 如果您尝试显示一个对话框，而其他对话框仍在原处(即前一个对话框仍处于转换过程中)，那么事情就会中断。

不过，我可以提供一个解决方法。它并不漂亮，但完成了工作。但首先，我在所有浏览器中发现了一个不相关的问题:

1. 如果您将内容附加到 body 中，库似乎会变得困惑；使用“目标”div 来解决问题:

   <div id="target"></div>
   ...
   document.getElementById("target").innerHTML += ("<pre>Your name is: " + str + "</pre>");
   

2. 无论是显示警报还是重新显示提示时，您都应该按照建议使用 setTimeout。但是，超时为零还不够，因为这里的问题出在 transitionend 上。设置一个足够高的值，让前一个对话框完成隐藏，问题就解决了:

           setTimeout(function() {
             alertify.alert(
               "Can't be empty!", 
               function() {
                   setTimeout(function() {
                       doPrompt(); 
                   }, 500);
               }
             ); 
           }, 500);
   

   (如果该值不够高，它不仅会在 Firefox 上持续损坏，还会损坏 Chrome 等曾经正常工作的浏览器，因此请记住这一点)

Working example 。在 Firefox 19.0、Chrome 25 和 Safari 4.0.4 中测试成功。