在前端开发中，浏览器窗口大小发生变化时，页面布局往往需要随之调整。jQuery 的 resize() 方法专用于监听窗口或元素的尺寸变化事件，当用户拖拽浏览器边缘、较大化/小化窗口、或在移动设备上切换横竖屏时，绑定的回调函数就会被触发。
resize() 通常绑定在 window 对象上，但也可以绑定到任意 HTML 元素。大多数元素不会主动触发 resize 事件——window 是唯一会因用户操作而频繁触发该事件的对象。对于普通元素，只有在通过 JavaScript 强制改变其尺寸时才会触发。
为什么我习惯在 resize 事件中使用防抖而不是直接执行逻辑？
resize 事件有一个容易忽视的特性：它在窗口拖拽过程中会连续密集触发，一秒钟可能触发数十次。如果你的回调里包含 DOM 操作、重排重绘或者 AJAX 请求，这种频率会迅速消耗性能资源，造成页面卡顿。更合理的做法是在 resize 事件上加一层防抖机制，让用户停止拖拽几百毫秒后再执行实际处理逻辑。有经验的开发者几乎不会把复杂逻辑直接放在 resize 回调里不加任何流量控制。
语法
$(selector).resize(function)
参数说明：
-
function（可选）：每次 resize 事件触发时执行的回调函数。如果不传参数，resize()会手动触发一次 resize 事件。
课程知识要点
-
主要作用于 window：虽然语法支持任意选择器，实际场景中绝大多数使用
$(window).resize()来监听浏览器窗口变化。 -
高频触发：窗口拖拽过程中事件会密集触发，应避免在回调里执行耗时操作，建议配合防抖或节流使用。
-
获取新尺寸：一般在回调内使用
$(window).width()和$(window).height()获取实时的窗口宽高。 -
不限于 window：
$(element).resize()也可绑定到元素上，但事件只在元素尺寸通过代码变更时触发，手动拖拽不会触发。 -
可与响应式逻辑结合：配合媒体查询或动态样式调整，在窗口跨断点变化时执行补丁逻辑。
示例：实时显示窗口尺寸和调整次数
下面这个例子将 resize 事件绑定在 window 上，每次窗口大小变化时，页面会实时更新当前的宽高数值，并累计用户调整窗口的次数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>resize() 方法示例 · 编程学习</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: sans-serif;
margin: 30px;
}
.counter {
font-weight: bold;
color: #d93025;
font-size: 22px;
}
.dimensions {
margin-top: 15px;
padding: 12px;
background-color: #e8f0fe;
border: 1px solid #1a73e8;
display: inline-block;
font-size: 18px;
line-height: 1.8;
}
</style>
<script>
var resizeCount = 0;
$(document).ready(function () {
// 绑定 resize 事件到 window
$(window).resize(function () {
// 累计调整次数
resizeCount += 1;
$(".counter").text(resizeCount);
// 获取当前窗口的宽高
var currentWidth = $(window).width();
var currentHeight = $(window).height();
// 更新页面上的显示信息
var info = "当前宽度: " + currentWidth + "px <br>当前高度: " + currentHeight + "px";
$("#dimensions").html(info);
});
});
</script>
</head>
<body>
<h2>jQuery resize() 方法——监听窗口尺寸变化</h2>
<p>尝试拖拽浏览器窗口边缘来查看效果。</p>
<p>窗口已调整 <span class="counter">0</span> 次。</p>
<div id="dimensions" class="dimensions">
当前宽度: -- px<br>当前高度: -- px
</div>
</body>
</html>
打开页面后，拖拽浏览器窗口的任意边缘，你会看到调整次数数字持续上涨，宽高数值随窗口大小实时更新。这个例子清晰展示了 resize 事件的两个核心用途：获取窗口当前尺寸和感知用户调整动作。
在项目中，resize() 最常见的用途是响应式布局的补丁逻辑。虽然 CSS 媒体查询已经能处理大部分布局切换，但有些动态行为仍需 JavaScript 介入——比如根据窗口宽度重新计算某个第三方图表容器的尺寸，或在移动端与桌面端之间切换不同的交互模式。
关于性能优化，这里给出一个简单的防抖封装示例：
var resizeTimer;
$(window).resize(function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
// 实际业务逻辑写在这里
console.log("窗口调整完毕，当前宽度: " + $(window).width());
}, 300);
});
这个写法在用户持续拖拽窗口时不断清除计时器，直到用户停顿 300 毫秒后才执行业务逻辑。对于含有 DOM 读写或图表重绘的 resize 回调，这个微小的延迟能大量减少不必要的重复计算，体验上平滑很多。
另外注意，resize() 事件不会在页面初次加载时自动触发。如果你有一段既需要在加载时执行、又需要在窗口变化时刷新的逻辑，应该把这段逻辑抽取成一个独立函数，在 ready() 里调用一次，再在 resize() 的回调里调用它，而不是期望 resize() 替你执行初始状态。这是一个容易被忽略的细节，特别是在需要根据窗口宽度初始化导航菜单状态的场景里。
