检测何时使用 JavaScript 调整窗口大小？

Posted 2023-02-22

【中文标题】检测何时使用 JavaScript 调整窗口大小？

【英文标题】：Detect when a window is resized using JavaScript ?

【发布时间】：2011-03-01 02:23:26

【问题描述】：

当用户结束调整浏览器窗口大小时，jQuery 或 javascript 有什么方法可以触发函数吗？

换句话说：

当用户调整浏览器窗口大小时，我可以检测到鼠标向上事件吗？否则： 我可以检测窗口大小调整操作何时完成吗？

我目前只能在用户开始使用 jQuery 调整窗口大小时触发事件

【问题讨论】：

这里有 jQuery 和非 jQuery 的解决方案：github.com/louisremi/jquery-smartresize

jquery-smartresize debounce 事件的完美解决方案！

@bradt 没有必要使用 jQuery 插件，因为这一切都可以在原生 JavaScript 中轻松完成

【参考方案1】：

如果您只想在滚动结束时检查，在 Vanilla JS 中，您可以提出如下解决方案：

超级超级紧凑

var t
window.onresize = () =>  clearTimeout(t) t = setTimeout(() =>  resEnded() , 500) 
function resEnded()  console.log('ended') 

所有 3 种可能的组合在一起 (ES6)

var t
window.onresize = () => 
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() =>  t = undefined; resEnded() , 500) //3


function resizing(target, w, h) 
    console.log(`Youre resizing: width $w height $h`)
    
function resStarted()  
    console.log('Resize Started') 

function resEnded()  
    console.log('Resize Ended') 

【参考方案2】：

另一种仅使用 JavaScript 的方法是：

window.addEventListener('resize', functionName);

每次大小变化时都会触发，就像其他答案一样。

functionName 是调整窗口大小时正在执行的函数的名称（末尾的括号不是必需的）。

【参考方案3】：

这可以通过 JavaScript 中 GlobalEventHandlers 接口的 onresize 属性来实现，方法是为 onresize 属性分配一个函数，如下所示：

window.onresize = functionRef;

以下代码 sn-p 演示了这一点，通过控制台在调整窗口大小时记录窗口的 innerWidth 和 innerHeight。 （调整窗口大小后触发 resize 事件）

function resize() 
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");


window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

【参考方案4】：

您可以使用.resize() 获取每次宽度/高度实际发生变化的时间，如下所示：

$(window).resize(function() 
  //resize just happened, pixels changed
);

You can view a working demo here，它采用新的高度/宽度值并在页面中更新它们以供您查看。请记住，事件并没有真正开始或结束，它只是在发生调整大小时“发生”......没有什么可以说另一个不会发生。

---

编辑： cmets 似乎您想要类似“on-end”事件的东西，您找到的解决方案可以做到这一点，但有一些例外（您无法区分鼠标向上以及跨浏览器方式的暂停，对于 end 与 pause 相同）。不过，您可以创建该事件，使其更简洁，如下所示：

$(window).resize(function() 
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() 
        $(this).trigger('resizeEnd');
    , 500);
);

您可以在某个地方将此作为基础文件，无论您想做什么...然后您可以绑定到您正在触发的新 resizeEnd 事件，如下所示：

$(window).bind('resizeEnd', function() 
    //do something, window hasn't changed size in 500ms
);

You can see a working demo of this approach here ​

【讨论】：

这取决于浏览器，何时触发以及触发多少调整大小事件：quirksmode.org/dom/events/resize.html

@chris_l：我不确定那个页面有多准确了……打开我在最新版 Firefox 中发布的演示，每次大小变化时都会触发它。我没有要测试的 Opera，它可能仍然不同，但它们至少比 quirksmode 建议的更一致，我会向他们发送需要更新的注释。

@Nick：是的，quirksmode 页面仅涵盖 FF 直到 3.1b2 - 但这种情况表明，它取决于浏览器...

我只是想顺便说一下，当用户在移动设备上放大页面时也会触发。

window.addEventListener('resize', function(), true);