检测何时使用JavaScript调整窗口大小？ [英] Detect when a window is resized using JavaScript ?

问题描述

当用户结束调整浏览器窗口大小时，有没有办法用jQuery或JavaScript触发函数？

Is there any way with jQuery or JavaScript to trigger a function when the user ends to resize the browser window?

换句话说：

1. 当用户调整浏览器窗口大小时，我能检测到鼠标注册事件吗？否则：


2. 我可以检测窗口调整大小操作何时完成？

我是当用户开始用jQuery调整窗口大小时，当前只能触发事件

I'm currently only able to trigger an event when the user start to resize the window with jQuery

推荐答案

你可以使用 .resize（） ，像这样：

You can use .resize() to get every time the width/height actually changes, like this:

$(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 start or end, it just "happens" when a resize occurs...there's nothing to say another one won't happen.

编辑：通过评论，您似乎想要一些像on-end事件，您找到的解决方案是这样做的，除了少数例外（您不能以跨浏览器的方式区分鼠标和暂停，结束与暂停相同的）。您可以创建该事件，以使其更清洁，如下所示：

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 end vs a pause). You can create that event though, to make it a bit cleaner, like this:

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

你可以把它作为一个基本文件，无论你想做什么......那你就可以绑定到您正在触发的新 resizeEnd 事件，如下所示：

You could have this is a base file somewhere, whatever you want to do...then you can bind to that new resizeEnd event you're triggering, like this:

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

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

这篇关于检测何时使用JavaScript调整窗口大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！