加速窗口大小调整功能的性能

Speeding up window resize function performance

本文关键字：性能 功能 调整 窗口大小 加速      更新时间：2023-09-26

我有一些类似于下面的脚本:

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

然而，这似乎运行相当缓慢，即使在Chrome上一个体面的PC，甚至当"doSomething"只是执行一个'console.log'，所以我只是想知道是否有任何更好的方法来检查屏幕大小是否在两个值之间，因为它调整大小?

谢谢

不要每次都轮询的大小。你使用了太多的计算能力。

相反，创建一个计时器并经常检查大小(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);
}

当窗口的大小超过你的界限时，计时器退出。

相关文章：