Javascript，一种处理resize Event ONLY it occurs的跨平台方式

Question

我想在当前 windows 的大小发生变化时执行一个函数。

我有这个非常简单的代码：(foo.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
    <script>
      function resize() {alert("FOO");}
      window.onresize = resize;
    </script>
</html>

在 Firefox Quantum v60.4（桌面）上，此代码非常有效。当我调整 firefox window 的大小时，会显示警报。当我只加载页面 "foo.html" 时，警报 "FOO" 不会出现。

但是：

在 Chrome v71.0.3578（桌面）上，当我调整 window 大小时，警告出现两次。
最糟糕的是，在我的 Android 智能手机（使用 Firefox v67.0.2）上，当我加载页面时出现警告（我不调整页面大小，只是加载）

当我调整 windows 大小时或在智能手机上从纵向模式切换到横向模式时，是否有一种方法可以仅处理一次调整大小 window 事件？

感谢帮助！

编辑：

使用此代码，我可以防止 Chrome 两次触发：

var resizeTimer;
window.onresize = function(){
    if (resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
        alert("FOO");
    }, 50);
};

但在 Firefox (Android) 上，我仍然遇到同样的问题。加载页面时显示警报 "FOO"。（在智能手机上，我只想在用户从纵向模式切换到横向模式时执行我的代码）

Answer 1

为什么没有这样的东西呢？

var CurrentWindowSize = {  w: document.body.clientWidth,  h: document.body.clientHeight }; // only Chrome has correct values here

window.onresize = function(e)
{
  let width  = e.target.outerWidth
  ,   height = e.target.outerHeight
  ;
  if (width != CurrentWindowSize.w
  || height != CurrentWindowSize.h)
  {
    CurrentWindowSize.w = width;
    CurrentWindowSize.h = height;
    WindowIsResized();
  }
}

function WindowIsResized() {
  // your stuff...
}

Javascript，一种处理resize Event ONLY it occurs的跨平台方式

Javascript, a cross platform way for handle resize Event ONLY it occurs

html

javascript

cross-platform

cross-browser