暂停所有代码并在之后继续执行，就像JS中的alert()函数。

Question

暂停所有代码并在之后继续执行，就像JS中的alert()函数。

7

让我来解释一下：当您在JS中调用alert()时，所有在alert下面的代码都将停止运行，当您点击“确定”后，代码将继续执行。

我使用以下代码创建了自己的自定义警报框：

function cAlert()
{
var bOn;
this.show = function (content)
{       
    bOn = true;
    document.write('<div id="turnOffLight"></div><div id="cAlertBox"><div id="cAlertImageBox"><img style="position: absolute; top: 54%; left: 50%; margin-top: -32px; margin-left: -32px;" src="Images/Vectors/1429744831_678136-shield-warning-64.png" alt=""/> </div><div id="cAlertContentBox"> </div><div id="cAlertButtonBox"><input id="cAlertButtonStyle" type="button" value="OK" onclick="cAlert.ok()" /></div></div>');
    $("#cAlertContentBox").html(content);
    $("#cAlertBox").show();
    $("#turnOffLight").fadeIn("fast");

    var div = document.getElementById('cAlertBox').offsetWidth;
    var res = -Math.abs(div / 2);
    document.getElementById('cAlertBox').style.marginTop = res + "px";
};
this.ok = function ()
{
    $("#cAlertBox").hide();
    $("#turnOffLight").fadeOut("medium");
    bOn = false;
};
}

另外的页面中：

<head>
    <script src="Scripts/jQuery_1.11.2.js" type="text/javascript"></script>
    <script src="Scripts/cAlertScript.js" type="text/javascript"></script>
    <script type="text/javascript">var cAlert = new cAlert();</script>
</head>

但是我有一个问题，在登录页面中，在调用cAlert()之后，我调用了以下内容：

echo "<script>javascript:history.go(-1)</script>";

当我使用alert()时，要返回到上一页，只有在用户点击确定后，浏览器才会返回到上一页。但是使用cAlert，浏览器已经返回到上一页。

我希望的是，用户需要点击“确定”按钮，代码才能继续，就像alert()一样。

- Junior Venâncio

1

除了本地函数alert()、confirm()和prompt()之外，在JS中这是不可能的。只有它们才能停止执行线程。当然，除非你想编写自己的JavaScript引擎，也可以在其他函数上停止执行... :P 无论如何，对于这个问题的精心撰写给予+1。 - Scimonster

2个回答

0

因为您只想在单击“确定”按钮后返回页面，所以将返回函数调用或代码放置在cAlert.ok()函数中。这样，页面仅在用户单击“确定”按钮时返回，因为只有在用户单击“确定”按钮时才会调用此函数。

this.ok = function ()
{
    $("#cAlertBox").hide();
    $("#turnOffLight").fadeOut("medium");
    bOn = false;

    window.history.go(-1);
};

- SaoBiz

这对我没有帮助，因为我想在其他页面中使用此警报，并且并不总是需要返回到上一页... - Junior Venâncio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DutChen18 · Accepted Answer

将 cAlert.show(content) 改为 cAlert.show(content, success)。将 cAlert.ok() 改为 cAlert.ok(' + success + ')。将 this.ok = function () 改为 this.ok = function (success)，最后在 ok() 函数的末尾添加 success();。

当 cAlert 中的按钮被点击时，这将调用 success。

现在你需要调用 cAlert.show("text", function() { javascript:history.go(-1); } ) 来代替 cAlert.show("text")。

因此，您的代码现在应该是：

function cAlert()
{
var bOn;
this.show = function (content, success)
{       
    bOn = true;
    document.write('<div id="turnOffLight"></div><div id="cAlertBox"><div id="cAlertImageBox"><img style="position: absolute; top: 54%; left: 50%; margin-top: -32px; margin-left: -32px;" src="Images/Vectors/1429744831_678136-shield-warning-64.png" alt=""/> </div><div id="cAlertContentBox"> </div><div id="cAlertButtonBox"><input id="cAlertButtonStyle" type="button" value="OK" onclick="cAlert.ok(' + success + ')" /></div></div>');
    $("#cAlertContentBox").html(content);
    $("#cAlertBox").show();
    $("#turnOffLight").fadeIn("fast");

    var div = document.getElementById('cAlertBox').offsetWidth;
    var res = -Math.abs(div / 2);
    document.getElementById('cAlertBox').style.marginTop = res + "px";
};
this.ok = function (success)
{
    $("#cAlertBox").hide();
    $("#turnOffLight").fadeOut("medium");
    bOn = false;

    success();
};
}

并且：

<head>
    <script src="Scripts/jQuery_1.11.2.js" type="text/javascript"></script>
    <script src="Scripts/cAlertScript.js" type="text/javascript"></script>
    <script type="text/javascript">
        var cAlert = new cAlert();
        cAlert.show("text", function() { javascript:history.go(-1); } );
    </script>
</head>