使用 JavaScript 检测窗口何时调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2996431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect when a window is resized using JavaScript ?
提问by aneuryzm
Is there any way with jQuery or JavaScript to trigger a function when the user ends to resize the browser window?
当用户结束调整浏览器窗口大小时，jQuery 或 JavaScript 有什么方法可以触发一个函数？
In other terms:
换句话说：
- Can I detect mouse up event when user is resizing the browser window? Otherwise:
- Can I detect when a window resize operation is finished?
- 当用户调整浏览器窗口大小时，我可以检测鼠标向上事件吗？除此以外：
- 我可以检测窗口调整大小操作何时完成吗？
I'm currently only able to trigger an event when the user start to resize the window with jQuery
我目前只能在用户开始使用 jQuery 调整窗口大小时触发事件
回答by Nick Craver
You can use .resize()to get every time the width/height actually changes, like this:
.resize()每次宽度/高度实际发生变化时，您都可以使用get ，如下所示：
$(window).resize(function() {
//resize just happened, pixels changed
});
You can view a working demo here, it takes the new height/width values and updates them in the page for you to see. Remember the event doesn't really startor end, it just "happens" when a resize occurs...there's nothing to say another one won't happen.
您可以在此处查看工作演示，它采用新的高度/宽度值并在页面中更新它们以供您查看。记住事件并没有真正开始或结束，它只是在发生调整大小时“发生”......没有什么可以说另一个不会发生的。
Edit:By comments it seems you want something like a "on-end" event, the solution you found does this, with a few exceptions (you can't distinguish between a mouse-up and a pause in a cross-browser way, the same for an endvs a pause). You can createthat event though, to make it a bit cleaner, like this:
编辑：通过评论，您似乎想要一个“on-end”事件，您找到的解决方案可以做到这一点，但有一些例外（您无法以跨浏览器的方式区分鼠标悬停和暂停，同为一个端Vs的停顿）。不过，您可以创建该事件，使其更简洁，如下所示：
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
You could have this is a base file somewhere, whatever you want to do...then you can bind to that new resizeEndevent you're triggering, like this:
你可以把它作为一个基本文件放在某个地方，无论你想做什么……然后你就可以绑定到resizeEnd你正在触发的新事件，就像这样：
$(window).bind('resizeEnd', function() {
//do something, window hasn't changed size in 500ms
});
回答by JSON C11
This can be achieved with the onresizeproperty of the GlobalEventHandlers interface in JavaScript, by assigning a function to the onresizeproperty, like so:
这可以通过实现在onResize的GlobalEventHandlers接口的属性在JavaScript中，通过分配功能的onResize受到财产，就像这样：
window.onresize = functionRef;
window.onresize = functionRef;
The following code snippet demonstrates this, by console logging the innerWidth and innerHeight of the window whenever it's resized. (The resize event fires after the window has been resized)
下面的代码片段演示了这一点，通过控制台在调整窗口大小时记录窗口的 innerWidth 和 innerHeight。（在调整窗口大小后触发调整大小事件）
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>回答by James
Another way of doing this, using only JavaScript, would be this:
仅使用 JavaScript 的另一种方法是：
window.addEventListener('resize', functionName);
This fires every time the size changes, like the other answer.
每次大小改变时都会触发，就像另一个答案一样。
functionNameis the name of the function being executed when the window is resized (the brackets on the end aren't necessary).
functionName是调整窗口大小时正在执行的函数的名称（末尾的括号不是必需的）。
回答by Claudio Ferraro
If You want to check only when scroll ended, in Vanilla JS, You can come up with a solution like this:
如果您只想在滚动结束时检查，在 Vanilla JS 中，您可以想出这样的解决方案：
Super Super compact
超级超级紧凑
var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }
All 3 possible combinations together (ES6)
所有 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')
}
