window.onresize或者$(window).resize()触发两次

场景

window.onresize或者$(window).resize()触发两次.比如浏览器全屏显示,如果使用screen.availHeight重布局屏幕会闪两次,因为resize方法会进2次.而且每次screen.availHeight都不一样.

原因

和浏览器的自身实现有关系.不同的浏览器和操作系统实现可能不一样,具体自己可以去玩一下.

参考: stackoverflow

错误实现

代码

window.onresize = function() {
        console.info(screen.availHeight);
    };

结果

全屏按钮点击时:

解决办法

为resize设置一个延迟

window.onresize = function() {
        var res;
        if (res){clearTimeout(res)}
        res = setTimeout(function(){console.log("resize triggered");},20);
    };