JS 窗口调整大小监听器 - JavaScript

在编写 Web 应用程序时，需要经常处理浏览器窗口大小的变化。通过使用 JavaScript 监听窗口大小的变化，可以根据不同的窗口大小采取不同的布局，从而提高应用程序的响应性和用户体验。下面是一个简单的 JS 窗口调整大小监听器的介绍。

如何监听窗口调整大小

可以通过 window.onresize 属性来监听窗口大小的变化。此属性规定当窗口被调整大小时要执行的事件处理程序。

window.onresize = function() {
  // your code here
}

如何防抖和节流

由于在调整窗口大小时，事件会不停地触发，因此需要使用防抖和节流来避免过多的事件处理。

防抖

防抖是指在连续触发事件后，事件处理函数只会执行一次，而且是在事件停止触发后一段时间再执行。

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

window.onresize = debounce(function() {
  // your code here
}, 500)

节流

节流是指在一段时间内，事件处理函数只会执行一次。

function throttle(fn, delay) {
  let timer
  let lastTime = 0
  return function() {
    const currentTime = new Date().getTime()
    if (currentTime - lastTime > delay) {
      fn.apply(this, arguments)
      lastTime = currentTime
    }
  }
}

window.onresize = throttle(function() {
  // your code here
}, 500)

示例代码

以下是一个监听窗口大小变化的示例代码，并且使用了节流技术。

function throttle(fn, delay) {
  let timer
  let lastTime = 0
  return function() {
    const currentTime = new Date().getTime()
    if (currentTime - lastTime > delay) {
      fn.apply(this, arguments)
      lastTime = currentTime
    }
  }
}

window.onresize = throttle(function() {
  console.log("window size has been changed")
}, 500)

以上是一个简单的 JS 窗口大小调整监听器的介绍，希望对您有所帮助。