Question

当我写alert('Hello')时，页面执行停止并等待批准继续。

我有一个 div 设置，使用HTML显示为虚假警报 - 此div有一个“确定”按钮。

我希望页面停止执行（就像警报一样），直到用户点击“确定”。

有可能吗？

Answer 1

你做不到。只有特殊的内置插件才能做到这一点。有一段时间内有showModalDialog特殊的内置功能，允许您为内容指定URI并进行自定义，但它从未得到广泛支持，现在甚至被曾经支持它的浏览器都弃用了。

相反，使用div的当前警报功能接受警报关闭时的回调（或返回已关闭的承诺），以允许您继续处理。

例如，如果您的代码曾经使用过alert并且工作方式如下：

function foo() {
    var x;

    x = doSomething();
    alert("Alert! Alert!");
    doSomethingAfterTheAlertIsCleared(x);
    doAnotherThingAfterward();
}

...你要把它改成：

function foo() {
    var x;

    x = doSomething();
    fakeAlert("Alert! Alert!", function() {
        doSomethingAfterTheAlertIsCleared(x);
        doAnotherThingAfterward();
    });
}

请注意，现在警报后面的所有代码都在一个函数中，我们将其引用传递给fakeAlert。假警报仍然显示时，foo函数返回，但最终用户解除假警报并调用我们的回调。请注意，我们的回调代码可以访问我们正在处理的foo调用中的本地因素，因为我们的回调是一个闭包（如果这是一个相当新的和/或神秘的术语，请不要担心，{{3} }）。

当然，如果警告后面的唯一事情是单个函数调用不带任何参数，我们可以直接传递该函数引用。例如，这：

function foo() {
    doSomething();
    alert("Alert! Alert!");
    doSomethingAfterTheAlertIsCleared();
}

变为：

function foo() {
    doSomething();
    fakeAlert("Alert! Alert!", doSomethingAfterTheAlertIsCleared);
}

（请注意()之后没有doSomethingAfterTheAlertIsCleared - 我们引用功能对象，而不是调用该函数; fakeAlert将调用它）。

如果您不确定fakeAlert将如何调用回调，它将在用户“关闭”警报div的事件处理程序中，您只需调用回调的参数就像您一样对任何其他函数的引用。因此，如果fakeAlert收到callback，则可以通过callback();来表示。

Answer 2

是的，这是可能的，我做了不准确，并没有经过良好测试的演示，这样做。

主要概念：

在这个例子中我们有正在执行的方法Login.Try（） Login.Proceed（）方法。 Login.Proceed（）进行AJAX查询和我们想等待它的执行，但不想绑定任何处理程序（只需将其等待为window.alert（））
而不是直接函数的执行Login.Proceed，我们使用async（）和await（）方法（比如在C＃中）
当我们需要“暂停”脚本并等待某事时，我们停下来方法执行使用throw和解析调用者的函数来运行当等待（异步）方法完成它的第二部分执行。

遗漏的范围：

清洁代码
针对不同浏览器的测试解决方案
保存/恢复本地变量
不适用于循环。

演示：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

Login.Try(); // START!! START!! START!!

var Login = {
    Url: "http://xxxx",
    Try: async(this, function (T) {

        console.log('before login');

        //var success = call(this, Login.Proceed); // normal call
        var success = await(this, Login.Proceed);  // that we want!

        console.log('after login');
        console.log('success ' + success);

    }),

    Proceed: function (callback) {
        console.log('before ajax');
        $.ajax({
            url: this.Url,
            context: document.body
        }).done(function () {
            console.log('after ajax');
            callback("role=admin");
        });
    }
}


function async(T, method){
   console.log('before async create');
   return function () { return method.apply(T); };
   console.log('after async create');
};

function await(T, method) {
    var fn = arguments.callee.caller.toString();
    var pos = fn.indexOf('await(');
    var allBeforeAwait = fn.substring(0, pos);

    var pos1 = fn.indexOf('await(');
    pos1 = fn.indexOf(',', pos1) + 1;
    var pos2 = fn.indexOf(')', pos1);
    var cc = fn.substring(pos1, pos2);


    pos = allBeforeAwait.lastIndexOf(';');
    var allBeforeCall = allBeforeAwait.substring(0, pos + 1) + "}";
    var callResult = allBeforeAwait.substring(pos + 1);

    var result = 10;
    var allAfterCall = "("+fn.substring(0, fn.indexOf(")")) + ",V){" + callResult + "V;";
    pos = fn.indexOf(')', pos) + 2;
    allAfterCall = allAfterCall + fn.substring(pos)+")";

    //uncomment to see function's parts after split
    //console.debug(allBeforeCall);
    //console.debug(cc);
    //console.debug(allAfterCall);

    method.apply(T, [function (value) {
        console.log('ajax response ' + value);
        eval(allAfterCall).apply(T, [T, value]);
    } ]);

    throw "";
};

</script>

希望这个演示会激发你一些想法。

另外，您可以查看http://blogs.msdn.com/b/rbuckton/archive/2011/08/15/promise-js-2-0-promise-framework-for-javascript.aspx

Answer 3

警报不可能，但你可以让事情看起来像警报。

例如，您创建了一个调用函数的函数。 :)然后你用一个巨大的IF创建一个函数。

window.callfunction = function (f, a, b) /* function name, arguments, boolean*/
{
    var handler = window[f];
    if (typeof handler === 'function') {
        handler(a, b);
    } else {
        alert("No function like that mate, sry.");
    }
}

function deleteAfterConfirm(a, b) /* arguments, boolean */
{
    if (b == true) {
        alert("i can delete, confirmed.");
        alert(a);
        return false;
    }
    magicConfirm(a);
}

function magicConfirm(a) {
    /** 
        modals, popovers, etc, anything you want,
    **/
    $("#confirmModal").modal("show");
    /**
        and put the function's name to the binding element's data
    **/
    $("#returntrue").data("call", arguments.callee.caller.name);
    $("#returntrue").data("arguments", a);
    /** 
        the element like OK button in the alert 
        calls the magicConfirm function's caller function 
        with true, which is the deleteAfterConfirm, and 
        because the bool is true, it will alert i can delete... 
    **/
    $("#returntrue").bind("click", function () {
        callfunction($(this).data("call"), $(this).data("arguments"), true);
    });
}


$(document).ready(function () {
    $("#deleteAfterConfirm").on("click", function () {
        deleteAfterConfirm("variable which is needed later.");
    });
});

所以现在你可以像使用alert（）或confirm（）这样的函数一样使用deleteAfterConfirm函数，因为它会自己调用另一部分。

不是最好的方法，但是这可以以某种方式替换确认和警报以获得更好看的版本。这是假警报的一种方式：）

玩得开心 - R

Answer 4

您可以使用Promise API执行此操作。这只是将代码划分并在动作侦听器中放置一些行。以下是示例代码：

在此示例中，有两个按钮。单击第一个按钮可启动代码，其余代码将放在promise.then功能上。

Html代码：

<body>
  <button id='startButton' onclick='start();'>Start Button</button>
  <button id='targetButton'>Target Button</button>
</body>

脚本代码：

<script>
    function start(){
      console.log('first log'); //put your div displayer code here
      let promise = new Promise(function(resolve, reject) {
          console.log('promise started');
          let targetButton = document.getElementById('targetButton');
          targetButton.addEventListener("click",function(){
            resolve();
          });
      });
      promise.then(function() {
          console.log('second log'); //put the rest of your code
      });
    }
</script>

在触发开始按钮后，您会看到first log和promise started。单击目标按钮后将显示second log。

Promise API的资源：

Answer 5

我认为这可以使用基本的JavaScript。您可以将假按钮设置为：

<button id="fakeButton" value="not" onclick="fakeButtonValChange()">OK</button>

然后：

function fakeButtonValChange() {
var fakebuttonval = document.getElementById("fakeButton").value;
document.getElementById("fakebutton").value = 
"clicked"
if (fakebuttonval == "clicked") {
*place stuff to show div here (i'm not good with css and that stuff)*
}

Answer 6

您可以使用以下代码暂停执行很长一段时间。

函数PauseExcecution（）   {
    //做点什么     睡眠（1000）;
   //做一些事......

}
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Answer 7

如果要等待对话框关闭，“open”属性表示对话框是打开还是关闭。完成后，解决承诺。为了同步，添加一个定时器来定期测试这个属性。

    let d = document.querySelector('dialog')
    d.showModal()
    await new Promise((resolve, reject) => {
        let timer = setInterval(_ => {
            if (!d.open) {
                resolve()
                clearInterval(timer)
            }
        }, 500)
    })

像alert（）函数一样停止页面执行

7 个答案: