跟踪窗口大小 jQuery - JavaScript

在前端开发中，我们经常需要根据窗口大小来调整页面布局或元素尺寸。而 jQuery 提供了方便的方法来跟踪窗口大小的变化，以便及时作出相应的调整。

通过监听 window 的 resize 事件

我们可以通过监听 window 对象的 resize 事件来实现窗口大小的跟踪。具体做法是在页面加载完毕后初始化一次，然后再绑定 resize 事件来实时捕捉窗口大小的变化，代码示例如下：

// 窗口大小变化处理函数
function onWindowResize() {
  // 获取窗口大小
  const w = $(window).width();
  const h = $(window).height();

  // 处理窗口大小变化
  // ...
}

// 页面加载完毕后初始化一次
$(document).ready(onWindowResize);

// 绑定 resize 事件
$(window).resize(onWindowResize);

上面的代码首先定义了一个处理函数 onWindowResize()，用来获取窗口大小并根据需要做出相应的处理。然后在页面加载完毕后调用一次该函数进行初始化，最后再将该函数绑定到 window 对象的 resize 事件上，以实时捕捉窗口大小的变化。

通过 debounce 函数实现性能优化

如果直接将处理函数绑定到 resize 事件上，那么每次窗口大小变化时都会触发该函数，可能会对性能造成一定的压力。为了优化性能，我们可以使用 debounce 函数来实现延迟执行，确保只有在窗口大小变化停止后才会触发处理函数，代码示例如下：

// 窗口大小变化处理函数
function onWindowResize() {
  // 获取窗口大小
  const w = $(window).width();
  const h = $(window).height();

  // 处理窗口大小变化
  // ...
}

// debounce 函数实现延迟执行
function debounce(fn, delay = 300) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

// 页面加载完毕后初始化一次
$(document).ready(() => {
  onWindowResize();
  $(window).resize(debounce(onWindowResize));
});

上面的代码首先定义了一个 debounce 函数，用于限制处理函数的触发频率。然后在页面加载完毕后初始化一次处理函数，同时将处理函数通过 debounce 函数进行包装，并将包装后的函数绑定到 resize 事件上，以实现延迟执行和性能优化。

总结

通过监听 window 对象的 resize 事件，我们可以方便地跟踪窗口大小的变化，并根据需要做出相应的调整。为了优化性能，我们可以使用 debounce 函数进行延迟执行。以上两种方法都能够提高前端开发效率和用户体验，是非常有用的技能之一。