射擊一種功能，當屏幕寬度通過斷點的去抖

我去抖動與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

射擊一種功能，當屏幕寬度通過斷點的去抖

回答

相關問題