Javascript 防止orientationchange 事件处理程序能够同时执行多次

如何解决Javascript 防止orientationchange 事件处理程序能够同时执行多次

当我尝试阻止同时多次调用事件处理程序时，我目前在 Javascript 中遇到问题。我知道 Javascript 是单线程的，因此我的问题看起来很奇怪。

这是通过 <script src="main.js"></script> 加载到我的 html 文件头部的代码：

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

当我转动手机时，会显示警报。不幸的是，当我没有关闭警报并再次转动手机时，会显示第二个警报。这不应该发生，因为我在显示第一个警报之前已经删除了事件监听器。

我也尝试通过全局变量来防止这种行为，但也没有奏效：

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

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

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

是否有任何 Javascript Guru 可以帮助我？

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

解决方法

我不是 JS Guru，我不知道您为什么这么问，但您的第一种方法几乎是正确的。删除添加新事件侦听器的 showAlert 的最后一行。 此解决方案运行良好，已在 iphone 10 上测试

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

window.addEventListener('orientationchange',test);