Javascript 当同一程序在两个不同选项卡中打开时，setTimeout事件无法正常工作_Javascript_Jquery

Javascript 当同一程序在两个不同选项卡中打开时，setTimeout事件无法正常工作

javascript jquery

Javascript 当同一程序在两个不同选项卡中打开时，setTimeout事件无法正常工作,javascript,jquery,Javascript,Jquery,在这里，我尝试用两个图像来做图像滑块，但当我在两个选项卡中打开同一页面时，或者如果我最小化Firefox并再次最大化图像，则图像滑块会闪烁，无法正常工作。Hide和show类使用setTimeout方法，它们被放置在fade类中，fade类也使用setTimeout方法 <html> <head> <style type="text/css"> .image1 { height:

在这里，我尝试用两个图像来做图像滑块，但当我在两个选项卡中打开同一页面时，或者如果我最小化Firefox并再次最大化图像，则图像滑块会闪烁，无法正常工作。Hide和show类使用setTimeout方法，它们被放置在fade类中，fade类也使用setTimeout方法

<html>
    <head>
        <style type="text/css">
            .image1 {
                height: 300;
                left: 181px;
                position: absolute;
                top: 103px;
                width: 300;
            }
        </style>
        <script type="text/javascript">
            var a = 1;
            var flg = 0,
                flg2 = 0;

            function fade() {
                setTimeout(function () {
                    if (flg2 == 0) {
                        hide();
                        flg2 = 1;
                        fade();
                    } else {
                        show();
                        flg2 = 0;
                        fade();
                    }
                }, 3000);

            }
            function hide() {
                document.getElementById("img1").style.opacity = a;
                document.getElementById("img2").style.opacity = (1 - a);
                if (a > 0) 
                    a = a - 0.1;
                else 
                    flg = 1;

                if (flg == 0) 
                    setTimeout(function () {
                        hide();
                    }, 50);
                else 
                    flg = 0;
                }
            function show() {
                document.getElementById("img1").style.opacity = a;
                document.getElementById("img2").style.opacity = (1 - a);
                if (a < 1.0) 
                    a = a + 0.1;
                else 
                    flg = 1;
                if (flg == 0) 
                    setTimeout(function () {
                        show();
                    }, 50);
                else 
                    flg = 0;
                }
        </script>
    </head>
    <body onload="fade()">
        <img class="image1" height="225" id="img1" src="img/image1.jpg" style="z-index:100" width="225"/>
        <img class="image1" height="225" id="img2" src="img/image2.jpg" style="z-index:1" width="225"/>
    </body>
</html>


.image1{
身高：300；
左：181px；
位置：绝对位置；
顶部：103px；
宽度：300；
}
var a=1；
var flg=0，
flg2=0；
函数fade（）{
setTimeout（函数（）{
如果（flg2==0）{
隐藏（）；
flg2=1；
褪色（）；
}否则{
show（）；
flg2=0；
褪色（）；
}
}, 3000);
}
函数hide（）{
document.getElementById（“img1”）.style.opacity=a；
document.getElementById（“img2”）.style.opacity=（1-a）；
如果（a>0）
a=a-0.1；
其他的
flg=1；
如果（flg==0）
setTimeout（函数（）{
隐藏（）；
}, 50);
其他的
flg=0；
}
函数show（）{
document.getElementById（“img1”）.style.opacity=a；
document.getElementById（“img2”）.style.opacity=（1-a）；
如果（a<1.0）
a=a+0.1；
其他的
flg=1；
如果（flg==0）
setTimeout（函数（）{
show（）；
}, 50);
其他的
flg=0；
}

我不确定这里的代码是否完全正确。看起来setTimeout的使用不正确。也许setInterval更合适

您是否愿意使用jQuery之类的库？这会处理很多代码

//-- our global image references
var img1, img2;

//-- our global interval id, in case we need to stop/start animation 
//-- via clearInterval(intervalId)
var intervalId;

//-- start animation on document load
$(document).ready(function() {
    //-- set image references to appropiate image ids
    img1 = $('#img1');
    img2 = $('#img2');

    //-- start animation loop
    intervalId = setInterval(function() {
        //-- using jquery's :visible check show/hide appropriately 
        if (img1.is(':visible')) {
            img1.fadeOut();
            img2.fadeIn();
        } else {
            img1.fadeIn();
            img2.fadeOut();
        }
    }, 3000);
});

JSFIDLE:

在请求代码方面的帮助时，请花时间使用适当的缩进等方式，以可读的方式格式化代码。我无法复制，请提供更多详细信息？这是在Firefox/OS的某个版本上吗？我使用的是Mac上的Firefox24。setInterval也会出现同样的问题，我对使用javascript非常感兴趣。是否有其他方法可以在JavaScript中实现这一点。