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

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

当窗口大小过去的边界，计时器退出。