在做出决定之前，我们如何停止执行 javascript 一段时间？

Question

I want to build my own popup box using div's (not the browser default).我想使用 div（不是浏览器默认值）构建我自己的弹出框。 So when I display my own popup I want to stop the javascript execution until the user clicks a button on my own popup, same as the default confirmation popup in browsers.因此，当我显示自己的弹出窗口时，我想停止 javascript 执行，直到用户单击我自己的弹出窗口上的按钮，这与浏览器中的默认确认弹出窗口相同。 Is there a way to do this?有没有办法做到这一点？ If so how?如果是这样怎么办？ I would like to avoid using jQuery.我想避免使用 jQuery。

Answer 1

You can't (and shouldn't) block JavaScript execution.您不能（也不应该）阻止 JavaScript 执行。 It would be possible by introducing an endless while loop, but that would seriously degrade performance and also affect the handling of click events.引入无限循环是可能的，但这会严重降低性能并影响点击事件的处理。

So, the best and probably only way to do this, is to use a callback that is called when you press a button.因此，最好也可能是唯一的方法是使用按下按钮时调用的回调。 This does mean that you can't call this alternative confirm method in a synchronous way, though.不过，这确实意味着您不能以同步方式调用此替代确认方法。 Instead you can provide a callback that is executed when one of the buttons is pressed.相反，您可以提供在按下其中一个按钮时执行的回调。

I hacked together an example.我拼凑了一个例子。 This is just made up on the fly, and only has some rudimentary styling.这只是在飞行中弥补的，只有一些基本的造型。 If it contains minor flaws, please forgive me.如有小瑕疵请见谅。

 /** * The alternative confirmation function */ window.myConfirm = function(options) { // Create the elements var popup = document.createElement('div'); var box = document.createElement('div'); var ok = document.createElement('button'); var cancel = document.createElement('button'); // Style them popup.className = 'lightbox'; box.className = 'dialog'; ok.className = 'button buttonOK'; cancel.className = 'button buttonCancel'; // Button texts ok.innerText = 'OK'; cancel.innerText = 'Cancel'; // Click handlers. ok.onclick = function(event) { popup.parentNode.removeChild(popup); options.onConfirm(); } cancel.onclick = function(event) { popup.parentNode.removeChild(popup); options.onDecline(); }; // Clicking the box does nothing. box.onclick = function(event){ event.stopPropagation(); }; // Clicking the popup equals cancel. popup.onclick = cancel.onclick; // Add all elements to the document. popup.appendChild(box); box.innerHTML = "<div><h2>" + options.title + "</h2>" + options.prompt + "</div>"; box.appendChild(ok); box.appendChild(cancel); // Finally show the box. document.body.appendChild(popup); }; /** * The call */ myConfirm({ title: "Confirm", prompt: "Are you sure?", onConfirm: function() { // The code that is executed when user presses OK. alert('You confirmed'); }, onDecline: function() { // Code executed on cancel, or when clicking next to the box. alert('You declined'); } });

 .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); text-align: center; } .dialog { display: inline-block; margin-top: 50px; background-color: white; padding: 50px; } .dialog div { text-align: left; }

Answer 2

There is no way of stopping the execution, get an input from the user and then continue from some point without using JavaScript popup boxes.没有办法停止执行，从用户那里获得输入，然后在不使用 JavaScript 弹出框的情况下从某个点继续。 You can build one on your own with html components and display it with buttons, provide call backs.您可以使用 html 组件自己构建一个并使用按钮显示它，提供回调。 You would need to block the window from user access, take the input and then unblock the window.您需要阻止用户访问该窗口，获取输入，然后取消阻止该窗口。 You may use Javascript frameworks like jQuery to get a better styled, enhanced and optimized component.您可以使用jQuery等Javascript框架来获得更好的样式、增强和优化的组件。 Here is piece of code demonstration:这是一段代码演示：

JavaScript JavaScript

function myCancelClick() {
    hidePrompt();
    alert("Cancel");
}

function myOkClick(){
    hidePrompt();
    alert("Ok");
}

function showPrompt() {
    document.getElementById("promptPane").style.display = '';
    document.getElementById("displayPane").style.display = 'none';
}

function hidePrompt() {
    document.getElementById("promptPane").style.display = 'none';
    document.getElementById("displayPane").style.display = '';
}

HTML body HTML 正文

<body>
    <div id="displayPane">
        <input type="button" onclick="showPrompt()" value="Show Prompt"/>
    </div>
    <div id="promptPane" style="display: none;">
        <div id="myPrompt">what would you like to click?<input type="button" onclick='myCancelClick();' value="Cancel"/><input type="button" onclick='myOkClick();' value="Ok"/>
        </div>
    </div>
</body>

Fiddle小提琴

Answer 3

If you know, how much time you want to stop for;如果你知道，你想停下多少时间； try using setTimeout() function of Javascript to produce a delay尝试使用 Javascript 的 setTimeout() 函数来产生延迟

在做出决定之前，我们如何停止执行 javascript 一段时间？

问题描述

3 个解决方案

解决方案1
3 2015-09-13 12:20:06

解决方案2
0 2015-09-13 12:36:38

JavaScript JavaScript

HTML body HTML 正文

解决方案3
0 2015-09-13 13:47:06

在做出决定之前，我们如何停止执行 javascript 一段时间？

问题描述

3 个解决方案

解决方案1 3 2015-09-13 12:20:06

解决方案2 0 2015-09-13 12:36:38

JavaScript JavaScript

HTML body HTML 正文

解决方案3 0 2015-09-13 13:47:06

解决方案1
3 2015-09-13 12:20:06

解决方案2
0 2015-09-13 12:36:38

解决方案3
0 2015-09-13 13:47:06