加速窗口调整功能性能

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

当窗口调整大小超过边界时,计时器退出.