Javascript 代码甚至在用户按下 ok 键之前就已经执行了 window

Question

我需要删除视频元素，Canvas 和 canvas 上的按钮，然后再显示警报 window 并且一旦用户按下警报 window 上的确定按钮，我需要显示一些其他元素。目前我面临以下问题。

警告 window 在删除按钮之前显示。所以我们只是在显示之前使用 setTimeout 删除了所有元素提醒 window 解决这个问题。
用户按下'ok'按钮后应执行的UI代码正在警报 window 显示后执行，不会停止用户点击。我认为 alert() 旁边的代码不应该是执行直到用户在警报 window.

下面是 Javascript 代码。

$("#remoteVideo").remove();
$("#localCanvas").remove();
$(".terminate_session_btn").remove();

// USED setTimeout TO DELAY THE DISPLAY OF ALERT WINDOW. WITHOUT
// setTimeout, ALERT WINDOW IS GETTING DISPLAYED BEFORE DELETING THE BUTTON.
setTimeout(function() {
    displayAndProcessUserTerminateAlertDialog();
}, 200);

function displayAndProcessUserTerminateAlertDialog() {
    socket.close();
    alert("User terminated the video call. Press 'Ok' button to create new session.");

    // BELOW CODE IS GETTING EXECUTED WITHOUT STOPPING FOR USER ACTION ON ALERT WINDOW.
    $(".main_container .item").hide();
    $("#video-session-menu").removeClass("active");
    $("#images-menu").removeClass("active");
    $(".sidebar ul li a").addClass("disabled");
}

任何人都可以帮助我理解为什么直到用户在警报 window 上按 OK 才会停止代码执行以及如何解决此问题。

更新：

有趣的是，如果我打开开发者工具，问题就不会发生。如果我不打开开发者工具，问题总是会发生。我不确定如何解决这个问题。

Answer 1

Alert in JS只负责显示消息，尝试使用window.confirm(message)（查看示例用例）

Answer 2

显然浏览器没有标准的警报行为。因此，您可能希望以您喜欢的行为实现您自己的警报。你可以在这里测试它：https://jsfiddle.net/rf0jd7te/1/

HTML

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Alert Window</p>
    <p>
    <input type="button" value="OK">
    </p>
  </div>

</div>

CSS

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JS

console.log("before alert");
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];
// Get the OK element that closes the modal
var OK = modal.querySelector("input[type=button]");
// When the user clicks on <span> (x), close the modal
function close() {
  modal.style.display = "none";
  console.log("after alert");
}
OK.onclick = span.onclick = function() {
  close();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    close();
  }
}
modal.style.display = "block";

Javascript 代码甚至在用户按下 ok 键之前就已经执行了 window

Javascript code is getting executed even before user presses ok on alert window

html

javascript

jquery

alert

HTML

CSS