射击一种功能，当屏幕宽度通过断点的去抖

我去抖动与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的。谢谢！

来源

2017-10-11 James Ives

如果可能的话，解决这个问题在CSS与媒体查询 – Timo

@Timo我用这个重新启动JavaS因此不可能发生事件。 –

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

由于该事件被称为只有当一个断点被传递，你不需要去抖事件处理程序。

演示 - 点击运行的代码片段，然后整版，并调整窗口

代码：

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);

来源

2017-10-12 04:04:34

射击一种功能，当屏幕宽度通过断点的去抖

回答

相关问题