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

Recursion with alertify.js leading to auto-closing alerts

本文关键字：js alertify 递归 使用      更新时间：2023-09-26

我正在尝试将以下旧学校片段转换为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>");
}

这是我第一次尝试的:

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>");
        }
      }
    }
  );
}

没有按预期工作。例如，在Firefox 19中，如果您使用键盘提交提示为空，则"error"警告将只显示很短的时间，然后自行消失，这与以前的工作方式不同。

我试图通过在每个警报调用周围插入对window.setTimeout的调用并将超时设置为0来打破递归。没用。

如果你能给我推荐一个有类似API的替代JavaScript库，我可以使用(当然不会有这个问题)。

这似乎不是alertify.js的问题，但与Firefox。如果您搜索与transitionend相关的bug(根据来源，在对话框动画中使用)，您将看到您正在遇到的问题的一些潜在候选问题(特别是"当有多个转换时未触发transitionend事件")。这与你所经历的是一致的——如果你试图在其他对话框还在的时候显示一个对话框(即前一个对话框还在过渡的中间)，那么事情就会中断。

我可以提供一个变通方法。虽然不好看，但能完成任务。但首先，我在所有浏览器中都发现了一个无关的问题:

  1. 库似乎变得混乱，如果你追加东西到body;使用"target" 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这样的浏览器，所以请记住这一点)

工作的例子。

相关文章：