像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演示这样做。

主要概念:

  1. 在这个例子中,我们有方法Login.Try(),它正在执行Login.Proceed()方法。 Login.Proceed()使AJAX查询,我们想等待它的执行,但不希望绑定任何处理程序(只是等待它作为window.alert())
  2. 而不是直接函数的执行Login.Proceed,我们使用async()和await()方法(就像在C#中)
  3. 当我们需要“暂停”脚本并等待某个东西时,我们停止使用throw方法执行,parsing调用者函数,等待(async)方法完成执行后运行它的第二部分。

什么被排除在范围之外:

  1. 清洁代码
  2. 针对不同浏览器的testing解决scheme
  3. 保存/恢复本地variables
  4. 不适用于循环。

演示:

 <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> 

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

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

这不可能像警报,但你可以让事情看起来像一个警报。

比如你做一个调用函数的函数。 :)然后你用一个巨大的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 logpromise 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; } } }