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

Question

当用户结束调整浏览器窗口大小时,是否有任何方法可以使用jQuery或JavaScript来触发函数？

换句话说:

1. 用户调整浏览器窗口大小时是否可以检测到鼠标注册事件？除此以外:
2. 我可以检测窗口调整大小操作何时完成？

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

Answer 1

.resize()每次宽度/高度实际变化时都可以使用,如下所示:

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

您可以在此处查看工作演示,它会获取新的高度/宽度值并在页面中更新它们以供您查看.记住事件并没有真正开始或结束,只是在发生调整大小时"发生"...没有什么可说的,另一个不会发生.

编辑:通过评论你似乎想要一个类似"on-end"事件的东西,你找到的解决方案就是这样做的,只有少数例外(你不能用跨浏览器的方式区分鼠标和暂停,同为一个端 Vs的停顿).您可以创建该事件,使其更清洁,如下所示:

$(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
});

你可以在这里看到这种方法的工作演示

Answer 2

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

window.addEventListener('resize', functionName);

每次大小改变时都会触发，就像另一个答案一样。

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

Answer 3

这可以通过实现在onResize的GlobalEventHandlers接口的属性在JavaScript中，通过分配功能的onResize受到财产，就像这样：

window.onresize = functionRef;

下面的代码片段演示了这一点，通过控制台在调整窗口大小时记录窗口的 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>