Question

有趣的是，我无法在Codepen或简单的基本页面中重现问题，如下例所示。此外，通过拖动调整大小时代码工作正常。这就好像最大化和恢复不被视为“调整大小”。

<!DOCTYPE html>
<html>
<head>
<style>
  div {
   width: 10px;
   height: 10px;
   border: 3px solid red;
  }
</style>
</head>

<body>
  <div></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
  <script>
  $(window).resize(function() {
   $("div").outerWidth($("body").outerWidth());
  });
  </script>
</body>
</html>

问题只出现在我正在处理的WordPress项目中。是否存在可能导致此问题的特定情况？或者除了'调整大小'之外还有其他要寻找的事件吗？

Answer 1

看来这是一个非问题，因为resize事件正好被解雇，正如处理程序中的console.log('Resized!');所示。

像竞争条件这样的事情实际发生了：我的outerWidth()并不总是返回新的，重新计算的值。（有时他们会这样做，进一步增加了混乱。）

我想知道是否有一个更清洁的解决方案，而不是添加延迟......

Answer 2

今天刚刚在调整大小事件后尝试获取浏览器高度时遇到问题。

在最大化时出现，witdh/height的值不是立即正确的。

在任何处理之前添加延迟对我来说很有效。

 methods: {
      sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      },
      async setTableHeight() {
        await this.sleep(250) // Wait some delay for size to be correct
        // do something
        var totalHeight = document.getElementById('q-app').offsetHeight
        document.getElementById("table").style.height = (totalHeight  - 60) + "px";
        console.log('size = ' + totalHeight )
      }

}

当窗口最大化或恢复时，$（窗口）.resize（）或$（窗口）.on（'resize'）不会触发。这些事件还有另一个触发器吗？

2 个答案: