加快窗口大小調整功能性能

Question

我有類似下面的一些腳本：

var breakpoints = [0,240,480,960,9999], 
    bpCount = breakpoints.length, 
    windowsize = 0; 

window.onresize = function() { 

    windowsize = document.body.clientWidth; 

    for(var i=0; i<bpCount; i++) { 
     if(windowsize >= breakpoints[i] && windowsize < breakpoints[i+1]) { 
      doSomething(breakpoints[i]); 
      break; 
     } 
    }  

}; 

然而，這似乎體面的PC上漂亮運行緩慢，甚至在Chrome中，即使「DoSomething的」剛執行一個'console.log'，所以我只是想知道是否有更好的方法來檢查屏幕大小是否在兩個值之間調整大小？

感謝

Answer 1

不要輪詢大小每一次。你使用太多的計算能力。

相反，做一個計時器，檢查大小，每隔一段時間（10 ms可能是太快了）：

var checkWindowSizeTimer; 

function checkWindowSize() { 
    var windowsize = document.body.clientWidth; 

    if (windowsize >= breakpoints[i] && windowsize < breakpoints[i+1]) { 
     doSomething(breakpoints[i]); 
     clearInterval(checkWindowSizeTimer); 
    } 
} 

window.onresize = function() { 
    checkWindowSizeTimer = setInterval(checkWindowSize, 10); 
} 

當窗口大小過去的邊界，計時器退出。