浏览器切换tab 或者隐藏计时器出现的bug

最新推荐文章于 2024-07-29 20:25:09 发布

木易一

最新推荐文章于 2024-07-29 20:25:09 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_43684713/article/details/88967309

版权

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种解决网页计时器在页面隐藏或最小化时出现问题的方法。通过监听页面的可见性变化事件（visibilitychange），可以实现当页面被隐藏时暂停计时器操作，避免出现图片轮播混乱等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当浏览器切换页面或者最小化页面时，网页中如果存在计时器，再次打开可能出现bug,如使用计时器的图片轮播，在网页来回切换的时候图片会乱，解决方法:

由visibilitychange 判断当前的活动状态，

当前页面有没有被隐藏 hidden

<script>
    var bowhidden="hidden" in document?"hidden": "webkithidden" in document?"webkithidden": "mozhidden" in document ?"mozhidden": null;
    var vibchage="visibilitychange" || "webkitvisibilitychange" || "mozvisibilitychange";
    document.addEventListener(vibchage,function (){
        /*ie10+  moz  webkit  默认*/
        if(!document[bowhidden]) /*false*/
        {
            console.log("激活");
        }
        else{
            /*true*/
            console.log("隐藏");
        }
    });
</script>

当切换页面再返回时，输出为：