Question

我正在使用lodash对一个窗口调整大小函数进行去抖动，并且想要设置它，所以当它完成调整大小时，如果用户调整了一个函数，则调用函数超过我的一个断点之上或之下。

这是我正在尝试做的一个简短示例，分配给断点的数组不能被硬编码：

  this.resizeListener = debounce(() => this.resizeFunc(), 
  250)

  window.addEventListener('resize', this.resizeListener)

  resizeFunc() {

    const breakpoints = [768, 1024, 320];
    if (breakpoints.includes(window.innerWidth)) {
      myFunc()
    }
  }

我遇到的问题是因为resizeFunc函数实际上并没有运行，直到浏览器因为去抖动而完成了大小调整，它才会在应该的时候触发myFunc。有没有办法让我检查一下window.innerHeight是否已移过（在breakpoints数组中的一个数字之上（上方或下方），以便正确触发？

我使用的是常规JavaScript，而不是jQuery。谢谢！

Answer 1

使用window#matchMedia，您可以使用media queries in JS。您可以定义类似媒体查询的CSS，并且可以指定一个事件处理程序，以便在媒体查询状态更改时通知您。

由于仅在传递断点时才调用该事件，因此您不需要对事件处理程序进行去抖动。

演示 - 点击运行代码段，然后点击整页，并调整窗口大小

<强>代码：

＆＃13;

const breakpoints = [768, 1024, 320];

const generateMatches = (breakpoints, cb) => breakpoints.map((breakpoint) => {
  const mql = window.matchMedia(`(min-width: ${breakpoint}px)`); // create a MediaQueryList
  
  // create the listener and return the handler, so it can be canceled
  return mql.addListener((e) => cb(e, breakpoint));
});

const myFunc = (e, breakpoint) => console.log(`${breakpoint}: ${e.matches}`);

const listeners = generateMatches(breakpoints, myFunc);

＆＃13;

当屏幕宽度通过一系列具有去抖动的断点

1 个答案: