Question

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

换句话说：

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

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

Answer 1

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

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

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

编辑：通过评论，您似乎想要一个类似“on-end”事件的内容，您找到的解决方案就是这样，除了少数例外（您无法区分鼠标并且以跨浏览器的方式暂停，对于结束与暂停相同。您可以创建该事件，以使其更清晰，如下所示：

$(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

Answer 2

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

window.onresize = functionRef;

以下代码段通过控制台在每次调整窗口大小时记录其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>

Answer 3

仅使用javascript的另一种方式是这样的：

window.addEventListener('resize', functionName);

每次更改大小都会触发该问题，就像其他答案一样。

functionName是调整窗口大小时正在执行的函数的名称（不需要使用括号）

Answer 4

如果您只想在滚动结束时检查，在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') 
}

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

4 个答案: