在做出决定之前，我们如何才能停止 JavaScript 的执行一段时间？答案

【问题标题】：How can we stop the execution of javascript for a while until a decision is made?在做出决定之前，我们如何才能停止 JavaScript 的执行一段时间？
【发布时间】：2015-09-13 11:56:40
【问题描述】：

我想使用 div 构建自己的弹出框（不是浏览器默认的）。因此，当我显示自己的弹出窗口时，我想停止 javascript 执行，直到用户单击我自己的弹出窗口上的按钮，这与浏览器中的默认确认弹出窗口相同。有没有办法做到这一点？如果有怎么办？我想避免使用 jQuery。

【问题讨论】：

为什么不呢？很容易。你试过了吗？
不可能，使用事件和回调函数。
@JonathanBrooks “我想停止 javascript 的执行，直到用户点击......”就像我说的，这在 JavaScript 中是不可能的。
@Kyll 即使无限循环也不起作用，它也会阻止事件触发。
如前所述，您不能停止执行，但可以使用带有回调或承诺的事件简单地实现流程

标签： javascript html popup

【解决方案1】：

您不能（也不应该）阻止 JavaScript 执行。可以通过引入无限的 while 循环来实现，但这会严重降低性能并影响点击事件的处理。

因此，最好也是可能唯一的方法是使用在您按下按钮时调用的回调。但是，这确实意味着您不能以同步方式调用此替代确认方法。相反，您可以提供一个在按下其中一个按钮时执行的回调。

我整理了一个例子。这只是即时制作的，只有一些基本的样式。如有小瑕疵，敬请见谅。

/**
 * 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;
}

【讨论】：

【解决方案2】：

没有办法停止执行，从用户那里获取输入，然后在不使用 JavaScript 弹出框的情况下从某个点继续执行。您可以使用 html 组件自己构建一个并使用按钮显示它，提供回调。您需要阻止用户访问该窗口，接受输入，然后取消阻止该窗口。您可以使用Javascript 框架，如jQuery，以获得更好的样式、增强和优化的组件。下面是一段代码演示：

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

【讨论】：

【解决方案3】：

如果您知道，您想停留多长时间；尝试使用 Javascript 的 setTimeout() 函数来产生延迟

【讨论】：

OP 需要 sleep 方法来模拟模式窗口。 setTimeout 只会延迟其参数函数的执行，setTimeout(...) 之后的代码会立即执行。