用js写一个绑定事件检测窗口大小

function handleResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 在这里执行你想要的操作，例如更新布局或显示不同的内容
  console.log(`窗口宽度：${width}px，窗口高度：${height}px`);

  //  一些例子：
  // if (width < 768) {
  //   // 在小屏幕上执行某些操作
  // } else {
  //   // 在大屏幕上执行其他操作
  // }
}


// 初始加载时执行一次
handleResize();

// 绑定 resize 事件
window.addEventListener('resize', handleResize);


// 可选：使用 debounce 或 throttle 优化性能，尤其是在 resize 事件频繁触发的情况下

// Debounce 函数 (lodash 或自己实现)
// function debounce(func, wait) {
//   let timeout;
//   return function() {
//     const context = this;
//     const args = arguments;
//     clearTimeout(timeout);
//     timeout = setTimeout(() => func.apply(context, args), wait);
//   };
// }

// 使用 debounce
// window.addEventListener('resize', debounce(handleResize, 200)); // 200ms 的延迟


// Throttle 函数 (lodash 或自己实现)
// function throttle(func, limit) {
//   let inThrottle;
//   return function() {
//     const args = arguments;
//     const context = this;
//     if (!inThrottle) {
//       func.apply(context, args);
//       inThrottle = true;
//       setTimeout(() => inThrottle = false, limit);
//     }
//   };
// }

// 使用 Throttle
// window.addEventListener('resize', throttle(handleResize, 200)); // 最多每 200ms 执行一次


//  移除事件监听器 (如果需要)
// window.removeEventListener('resize', handleResize); //  或者使用 debounce/throttle 版本的 handleResize

代码解释:

1. handleResize() 函数: 这个函数包含了在窗口大小改变时需要执行的代码。 它获取当前窗口的宽度 (window.innerWidth) 和高度 (window.innerHeight)，并将其打印到控制台。 你可以在这里替换成你自己的逻辑。

2. 初始调用 handleResize(): 在页面加载完成后立即调用 handleResize() 函数，以确保初始状态下也能正确设置样式或执行其他操作。

3. window.addEventListener('resize', handleResize): 这行代码将 handleResize 函数绑定到 resize 事件上。每当窗口大小改变时，浏览器都会触发 resize 事件，并执行 handleResize 函数。

4. Debounce 和 Throttle (可选): resize 事件可能会在短时间内频繁触发，例如用户拖动窗口大小的时候。这可能会导致性能问题。 Debounce 和 Throttle 两种技术可以用来优化性能：

   • Debounce: 在指定的时间间隔内，如果事件再次触发，则会重置计时器。只有当事件停止触发一段时间后，才会执行函数。 适用于用户停止调整大小后才更新布局的场景。
   • Throttle: 在指定的时间间隔内，最多只执行一次函数。 适用于需要实时响应大小变化，但又不想过于频繁执行函数的场景。

5. window.removeEventListener() (可选): 如果你需要在某个时刻停止监听 resize 事件，可以使用 window.removeEventListener('resize', handleResize) 来移除事件监听器。 确保传入与添加监听器时相同的函数引用 (例如，如果使用了 debounce/throttle，则传入 debounce/throttle 返回的函数)。

如何使用:

1. 将代码复制到你的 JavaScript 文件中 (例如 script.js)。
2. 在 HTML 文件中引入 JavaScript 文件: <script src="script.js"></script> 最好放在 </body> 结束标签之前。

现在，每当窗口大小改变时，你都会在控制台中看到输出的宽度和高度。 你可以根据这些值来调整你的页面布局或执行其他操作。

希望这个解释能够帮助你理解如何使用 JavaScript 检测窗口大小变化!