jquery JavaScript代码甚至在用户按下警报窗口上的确定之前就已执行

uz75evzq 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(119)

我需要删除视频元素，画布和画布上的一个按钮，然后显示一个警报窗口，一旦用户按下警报窗口上的确定按钮，我需要显示一些其他元素。目前，我面临着以下问题。
1.在删除按钮之前显示警告窗口。因此，我们只是使用setTimeout删除所有元素，然后显示警报窗口来解决这个问题。
1.用户按下“确定”按钮后应执行的UI代码在警报窗口显示后执行，用户点击时未停止。我认为alert()旁边的代码不应该被执行，直到用户按下警报窗口上的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");
}

任何人都可以请帮助我理解为什么代码执行不停止，直到用户按下确定警报窗口，以及如何解决这个问题。

更新：

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

jquery

来源：https://stackoverflow.com/questions/63104450/javascript-code-is-getting-executed-even-before-user-presses-ok-on-alert-window

2条答案

按热度按时间

p8ekf7hl1#

显然，浏览器没有标准的警报行为。因此，您可能希望使用自己喜欢的行为实现自己的警报。你可以在这里测试一下：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;
}

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

赞(0）回复(0）举报 2023-10-17

zf9nrax12#