2

我正在尝试将以下旧学校代码段转换为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

这是我第一次尝试的：

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

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

我尝试通过在每个 alertify 调用周围插入window.setTimeout超时设置来中断递归。0它没有帮助。

如果您可以向我推荐一个具有类似 API 的备用 JavaScript 库，我可以使用它来代替（当然没有这个问题）。

4

1 回答 1

2

这似乎不是问题alertify.js，而是 Firefox。如果您搜索与（根据消息来源在对话框动画中使用）相关的错误transitionend，您将看到您遇到的问题的一些潜在候选者（特别是“当有多个转换时未触发transitionend 事件”）。这与您所经历的一致 - 如果您尝试显示一个对话框，而另一个对话框仍在原处（即前一个对话框仍在转换中间），那么事情就会中断。

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

  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 等曾经工作的浏览器，所以请记住这一点）

工作示例。在 Firefox 19.0、Chrome 25 和 Safari 4.0.4 中成功测试。

于 2013-03-02T07:24:26.900 回答