Eine Funktion feuern, wenn die Bildschirmbreite ein Array von Breakpoints mit Debounce passiert

Question

Ich debugge eine Fenstergröße Funktion mit lodash und möchte es einrichten, wenn es die Größenänderung beendet, ruft eine Funktion, wenn ein Benutzer die Größe entweder über oder geändert hat unter einem meiner Haltepunkte. ist Ich habe

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

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

    resizeFunc() { 

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

Das Problem, weil die resizeFunc Funktion, bis tatsächlich nicht laufen:

Hier ist ein kurzes Beispiel dafür, was ich versuche zu tun, werden die Array-Breakpoints zugeordnet sind, können nicht fest einprogrammiert Der Browser hat die Größenänderung aufgrund der Entprellung abgeschlossen, es wird myFunc nicht ausgelöst, wenn es sollte. Gibt es eine Möglichkeit für mich, zu überprüfen, ob window.innerHeight an einer der Zahlen in meinem breakpoints Array vorbeigegangen ist (entweder über oder unter), so dass es korrekt ausgelöst wird?

Ich verwende reguläres JavaScript, nicht jQuery. Vielen Dank!

Answer 1

Mit window#matchMedia können Sie media queries in JS verwenden. Sie definieren eine CSS-ähnliche Medienabfrage und Sie können einen Ereignishandler zuweisen, der Sie benachrichtigt, wenn sich der Status der Medienabfrage ändert.

Da das Ereignis nur aufgerufen wird, wenn ein Haltepunkt übergeben wird, müssen Sie den Ereignishandler nicht entprellen.

Demo - klicken Lauf Code-Schnipsel, dann ganze Seite, und die Größe der Fenster

Code:

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