Javascript防止定向改变事件处理程序能够同时执行多次

Question

我目前在Javascript中遇到一个问题，当我试图防止事件处理程序同时被多次调用时。我知道Javascript是单线程的，所以我的问题看起来很奇怪。

下面的代码是加载在我的html文件的头部通过<script src="main.js"></script>:

function showAlert ( ) {
window.removeEventListener ( 'orientationchange' , showAlert );
alert ( 'alert' );
// code execution doesn't seem to stop here while the alert is open
window.addEventListener ( 'orientationchange' , showAlert );
}
function onLoad ( ) {
document.removeEventListener ( 'DOMContentLoaded' , onLoad );
window.addEventListener ( 'orientationchange' , showAlert );
}
document.addEventListener ( 'DOMContentLoaded' , onLoad );

当我打开我的手机警报显示。不幸的是，当我没有关闭提醒并再次打开手机时，就会显示第二个提醒。这应该不会发生，因为在显示第一个警报之前我已经删除了eventlistener。

我也试图通过一个全局变量来防止这种行为，但它也不起作用:

var alertIsShown = false;
function showAlert ( ) {
if ( alertIsShown == false ) {
alertIsShown = true;
alert ( 'alert' );
// code execution doesn't stop here
alertIsShown = false;
}
//alertIsShown = false; // doesn't matter if I put the alert here
}
function onLoad ( ) {
document.removeEventListener ( 'DOMContentLoaded' , onLoad );
window.addEventListener ( 'orientationchange' , showAlert );
}
document.addEventListener ( 'DOMContentLoaded' , onLoad );

我也检查了DOMContentLoaded事件是否以某种方式触发多次，但事实并非如此。

这里的问题似乎很相似，但无论我等多久才打开手机，我都会收到一个提醒。

有任何Javascript大师可以帮助我吗?

更新01:我发现，尽管互联网上的大多数人都这么说，但在官方规范中，在显示警告消息时暂停代码执行是可选的。不幸的是，切换到确认也没有解决我的问题。在显示消息框时，当手机旋转时，会显示另一个消息框。

Answer 1

我不是一个JS大师，我不知道你为什么问，但你的第一个方法几乎是正确的。删除showAlert中添加新事件侦听器的最后一行。在iPhone 10上测试过，这个解决方案效果很好

function test() {
window.removeEventListener('orientationchange', test);
alert('orientation change')
}
window.addEventListener('orientationchange', test);