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

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

换句话说：

当用户调整浏览器窗口的大小时，我是否可以检测到鼠标上升事件？否则：

我是否可以检测窗口大小调整操作何时完成

目前，我只能在用户开始使用jQuery调整窗口大小时触发一个事件，每次宽度/高度实际发生变化时，您都可以使用jQuery获取该事件，如下所示：

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

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

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

，它将获取新的高度/宽度值，并在页面中进行更新，以供您查看。请记住，事件并不真正开始或结束，它只是在发生调整大小时“发生”…没有什么可以说另一个不会发生

---

编辑：通过评论，您似乎想要类似“结束”事件的事件，您找到的解决方案可以做到这一点，但有几个例外（您无法区分鼠标向上移动和跨浏览器方式的暂停，结束与暂停也是如此）。不过，您可以创建该事件，使其更清晰，如下所示：

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

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

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

你可以在某个地方有一个基本文件，不管你想做什么…然后你可以绑定到你正在触发的新

resizeEnd

事件，如下所示：

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

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

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

---

​

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

window.onresize=functionRef

下面的代码片段演示了这一点，只要调整窗口的大小，控制台就会记录窗口的innerWidth和innerHeight。（调整窗口大小后触发调整大小事件）


function resize（）{
console.log（“高度：”，window.innerHeight，“px”）；
log（“宽度：”，window.innerWidth，“px”）；
}
window.onresize=调整大小
为了使此代码段按预期工作，您需要将浏览器窗口缩小到此代码段的大小，或者全屏显示此代码段并从那里调整大小。
另一种方法是仅使用JavaScript：

window.addEventListener('resize', functionName);

这会在每次大小更改时触发，就像另一个答案一样

functionName
是调整窗口大小时正在执行的函数的名称（末尾的括号不是必需的）。
如果您只想在滚动结束时进行检查，在Vanilla JS中，您可以提出如下解决方案：

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

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

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

超紧凑型

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

所有3种可能的组合在一起（ES6）

这取决于浏览器，何时以及触发多少调整大小事件：@chris_l:我不确定该页面是否准确……打开我在最新Firefox中发布的演示，它会在每次大小更改时触发。我没有Opera要测试，它可能还是不同的，但它们至少比quirksmode建议的更一致，我会给他们发一张便条，这需要更新。@Nick：是的，quirksmode页面只涵盖3.1b2之前的FF-但这类节目，这取决于浏览器…我只是想顺便说一下，当用户在移动设备上放大页面时，也会触发此操作。window.addEventListener（'resize'，function（）{}，true）；这里有一个jQuery和非jQuery解决方案：jQuery smartresize取消公告事件的漂亮解决方案@bradt不需要使用jQuery插件，因为这一切都可以用普通JavaScript轻松完成