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中，如果您使用键盘将提示提交为空，则“错误”警报将仅显示很短的时间，然后将自动消失，这不是以前的工作方式。

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

如果你能推荐一个我可以使用的类似API的替代JavaScript库（当然没有这个问题），这是没关系的。

Answer 1

alertify.js似乎不是问题，而是使用Firefox。如果您搜索bugs related to transitionend（在对话框动画中使用，根据the sources），您会看到一些您正在遇到的问题的潜在候选人（特别是"transitionend event not fired when there are multiple transitions"）。这与您正在经历的内容一致 - 如果您尝试在其他内容仍然存在的情况下显示对话框（即上一个对话框仍处于转换过程中），则事情会中断。

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

如果您将内容附加到body，那么图书馆似乎会感到困惑。使用“目标”div代替解决问题：

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

在显示提醒和重新显示提示时，您应该按照建议使用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中成功测试。

使用alertify.js递归导致自动关闭警报

1 个答案: