像alert（）函数一样停止页面执行
当我写alert('Hello') ，页面执行停止并等待批准继续。
我有一个div设置显示为假警报，使用HTML – 这个div有一个“确定”button。
我希望页面停止执行（就像alert一样），直到用户点击“OK”。
可能吗 ？
你不能。 只有特殊的插件可以做到这一点。 有一段时间有showModalDialog特殊的内置，让你指定一个URI的内容，从而定制它，但它从来没有得到广泛的支持，现在已经废弃，即使是曾经支持它的浏览器。
相反，使当前使用div警报函数在警报closures时接受callback（或者返回一个在closures时解决的约定），以允许您继续处理。
所以举个例子，如果你的代码用来使用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函数返回，但最终用户closures虚假警报，并调用callback函数。 请注意，我们的callback代码可以访问我们正在处理的foo调用中的本地代码，因为我们的callback是一个闭包（如果这是一个相当新的和/或神秘的术语， 闭包不复杂 ）。
当然，如果警报之后唯一的一个函数调用没有任何参数，我们可以直接传递该函数引用。 例如，这个：
function foo() { doSomething(); alert("Alert! Alert!"); doSomethingAfterTheAlertIsCleared(); }
变为：
function foo() { doSomething(); fakeAlert("Alert! Alert!", doSomethingAfterTheAlertIsCleared); }
（请注意，在doSomethingAfterTheAlertIsCleared之后没有() ，我们指的是函数对象 ，而不是调用函数; fakeAlert会调用它。
如果您不确定fakeAlert如何调用callback函数，那么它将位于用户“closures”提醒div的事件处理程序中，并且您只需调用callback的参数，就像您对其他任何引用function。 所以如果fakeAlert收到它作为callback ，你说callback(); 。
是的，这是可能的 ，我做了不准确的，并没有很好的testing演示这样做。
主要概念：
- 在这个例子中，我们有方法Login.Try（），它正在执行Login.Proceed（）方法。 Login.Proceed（）使AJAX查询，我们想等待它的执行，但不希望绑定任何处理程序（只是等待它作为window.alert（））
- 而不是直接函数的执行Login.Proceed，我们使用async（）和await（）方法（就像在C＃中）
- 当我们需要“暂停”脚本并等待某个东西时，我们停止使用throw方法执行，parsing调用者函数，等待（async）方法完成执行后运行它的第二部分。
什么被排除在范围之外：
- 清洁代码
- 针对不同浏览器的testing解决scheme
- 保存/恢复本地variables
- 不适用于循环。
演示：
<script src="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>
希望这个演示会激发你一些想法。
这不可能像警报，但你可以让事情看起来像一个警报。
比如你做一个调用函数的函数。 :)然后你用一个巨大的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
你可以用Promise API做到这一点。 这只是关于分割你的代码，并在动作监听器中放置一些行。 这里是示例代码：
在这个例子中，有两个button。 点击第一个button开始一个代码，其余的代码将被放置在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刚刚触发启动button后开始。 点击目标button后会显示second log 。
Promise API的资源：
- MDN：Mozilla开发者networking
- MSDN：微软开发者networking
- 一个非常详细的教程
我认为这是可能的使用基本的JavaScript。 你可以像这样设置假button：
<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)* }
使用`Bootstap'模式
然后删除closuresbutton，并使用下面的代码禁用模型窗口隐藏
$('#myModal').modal({backdrop: 'static', keyboard: false})
将您的function和closures事件绑定到该模式窗口的OKbutton。
您可以使用以下代码长时间暂停执行。
函数PauseExcecution（）{
//做一些东西
睡眠（1000）;
//做一些东西…}
function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } }
