javascript - js检测横竖屏，页面会闪一下，求解～

Question

这个页面本身不是太长，在大屏手机上竖屏底下会留白，所以有了需求，希望在大屏幕上页面能垂直居中显示

本来页面是这样的

这是所希望得到的样子

现在是效果有了，就是切换的时候页面会闪一下，请好心人帮忙看下这个怎么处理，不胜感激～
代码如下，写的比较乱请多担待～

//屏幕方向标识，0横屏，其他值竖屏
var orientation=0;
var innerWidthTmp = window.innerWidth;

//横竖屏事件监听方法
function screenOrientationListener(){
    try{
        var iw = window.innerWidth;
        //屏幕方向改变处理
        if(iw != innerWidthTmp){
            if(iw>window.innerHeight)orientation = 90;
            else orientation = 0;
            //调用转屏事件
            screenOrientationEvent();
            innerWidthTmp = iw;
        }
    } catch(e){alert(e);};
    //间隔固定事件检查是否转屏，默认500毫秒
    setTimeout("screenOrientationListener()",500);
}
//启动横竖屏事件监听
screenOrientationListener();


function screenOrientationEvent(){
    var winW = $(window).width();
    var winH = $(window).height();
    if($(".wrapper").length < 1) {
        $(".temp-container, footer").wrapAll('<p class="wrapper"/>');
    }
    var wrap = $(".wrapper");
    var wrapH = wrap.height();

    if(orientation == 0){
        if(winH > wrapH){
            var top = (winH - wrapH) / 2;
            wrap.css({
                "position":"absolute",
                "width":"100%",
                "top": top,
                "left":0
            })
        }
    }
    else {
        wrap.css({
            "top": 0
        })
    }
}
$(document).ready(function(){
    screenOrientationEvent();
})

//页面上有container和footer两块内容
p class="temp-container"
footer

Answer 1

试试在切换页面前中止 timer

javascriptvar timer = setTimeout("screenOrientationListener()",500);
// ...
// 在适当的地方
clearTimeout(timer)

另外，像这种定时循环处理的任务，建议用 setInterval 代替 setTimeout