甚至在用户在警报窗口上按ok之前，Javascript代码就已执行

Question

在显示警报窗口之前，我需要删除视频元素、画布和画布上的按钮，一旦用户按下警报窗口上的ok按钮，我需要显示一些其他元素。目前我面临以下问题。

1. 删除按钮前将显示警报窗口。因此，我们只是使用setTimeout来删除所有元素，然后再显示警报窗口来解决这个问题
2. 用户按下“确定”按钮后应执行的UI代码在警报窗口显示后执行，用户单击时不停止。我认为在用户按下警报窗口上的Ok之前，不应该执行警报（）旁边的代码

下面是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");
}

任何人都可以帮助我理解为什么在用户按下警报窗口上的“确定”之前，代码执行不会停止，以及如何解决此问题。

更新：

有趣的是，如果我打开开发人员工具，问题就不会发生。若我不打开开发人员工具，问题总是会发生。我不知道如何解决这个问题。

Answer 1

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

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

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